/* ===========================
   Media Queries - Responsive Design
   Consolidated responsive styles for all pages
   =========================== */

/* =============================================================================
   BREAKPOINT: 1024px - Large tablets and small desktops
   ============================================================================= */
@media (max-width: 1024px) {
  /* Statistics - adjust grid */
  .stats-overview {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   BREAKPOINT: 968px - Tablets
   ============================================================================= */
@media (max-width: 968px) {
  /* Age Group - switch to single column layout */
  .age-group-content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sidebar > * {
    flex: 1 1 300px;
  }

  /* News - adjust grid */
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   BREAKPOINT: 900px - Small tablets
   ============================================================================= */
@media (max-width: 900px) {
  /* Navigation adjustments handled in main.css */
}

/* =============================================================================
   BREAKPOINT: 770px - Large mobile / small tablet
   ============================================================================= */
@media (max-width: 770px) {
  /* Age Group - trainers container layout */
  .trainers-container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  
  .section-card {
    padding: 1.5rem;
  }
}

/* =============================================================================
   BREAKPOINT: 768px - Mobile landscape / small tablets
   ============================================================================= */
@media (max-width: 768px) {
  /* Container padding adjustments */
  .kontakt-section,
  .about-section {
    padding: 1.5rem;
  }

  .stats-card {
    padding: 1.5rem;
  }

  /* Vpis specific */
  .vpis-main {
    grid-template-columns: 1fr;
  }

  .vpis-contact {
    position: static;
    top: auto;
  }

  .vpis-content {
    padding: 1.5rem;
  }

  .vpis-button {
    width: 100%;
  }

  /* Statistics grid */
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  /* Timetable mobile layout */
  .timetable-wrapper {
    overflow-x: hidden;
  }

  .timetable thead {
    display: none;
  }

  .timetable,
  .timetable tbody,
  .timetable tr {
    display: block;
    width: 100%;
  }

  .timetable td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .timetable td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #111827;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  .timetable tr {
    margin-bottom: 1rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border-left: 4px solid #aa912b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .timetable tr:hover {
    background: #f9fafb;
  }

  .timetable td:last-child {
    border-bottom: none;
  }

  /* News detail */
  .news-detail-container {
    padding: 1rem;
  }

  .news-detail-title {
    font-size: 1.5rem;
  }
}

/* =============================================================================
   BREAKPOINT: 640px - Mobile
   ============================================================================= */
@media (max-width: 640px) {
  /* Oprema header */
  .oprema-header .oprema-title {
    font-size: 2rem;
  }

  .oprema-header .oprema-subtitle {
    font-size: 0.95rem;
  }

  /* Age Group */
  .age-group-title {
    font-size: 2rem;
  }

  .trainer-image-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
  }

  .trainer-title {
    margin-bottom: 1rem;
  }

  .age-group-content {
    gap: 1.5rem;
  }

  .sidebar {
    flex-direction: column;
  }

  .timetable .day-label {
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  /* News grid */
  .news-grid {
    grid-template-columns: 1fr;
  }

  .home-news-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .featured-news {
    padding: 1rem;
  }

  .featured-title {
    font-size: 1.25rem;
  }
}

/* =============================================================================
   BREAKPOINT: 480px - Small mobile
   ============================================================================= */
@media (max-width: 480px) {
  /* Container padding */
  .kontakt-section,
  .about-section {
    padding: 1rem;
  }

  .kontakt-item {
    padding: 1rem;
  }

  .stats-card {
    padding: 1rem;
  }

  .section-card {
    padding: 1rem;
  }

  .vpis-content,
  .vpis-contact,
  .vpis-impressum {
    padding: 1rem;
  }

  /* Trainers */
  .trener-section {
    padding: 1.5rem 1rem;
  }

  .trener-info {
    padding: 1rem;
  }

  /* Fields */
  .polje-card {
    border-radius: 0.5rem;
  }

  .polje-image {
    height: 180px;
  }

  .polje-info {
    padding: 1rem;
  }

  /* Stats */
  .stats-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    padding: 0.75rem 0.25rem;
  }

  .stat-value {
    font-size: 1.125rem;
  }

  .legend {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Stats info card */
  .stats-info-card {
    padding: 1rem;
  }

  .stats-info-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  /* Age Group header */
  .age-group-header {
    margin-bottom: 0.75rem;
  }

  .age-group-subtitle {
    font-size: 1rem;
  }

  /* Typography adjustments */
  .section-title {
    font-size: 1.125rem;
  }

  /* Buttons */
  .vpis-button,
  .oprema-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
}

/* =============================================================================
   BREAKPOINT: 360px - Extra small mobile
   ============================================================================= */
@media (max-width: 360px) {
  /* Extra tight padding for very small screens */
  .osnovni-section,
  .vpis-section,
  .oprema-section {
    padding: 0.75rem 0.5rem 6rem 0.5rem;
  }

  .age-group-section,
  .statistika-section {
    padding: 0.5rem 0.5rem 6rem 0.5rem;
  }

  /* Smaller container padding */
  .kontakt-section,
  .about-section,
  .stats-card,
  .section-card,
  .vpis-content,
  .vpis-contact,
  .vpis-impressum {
    padding: 0.75rem;
  }

  /* Typography */
  .age-group-title {
    font-size: 1.75rem;
  }

  .osnovni-title,
  .vpis-title,
  .statistika-title,
  .oprema-title {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1rem;
  }

  .stats-info-title {
    font-size: 1.125rem;
  }
}