/*
 * TRAAN Theme — responsive.css
 * Mobile & tablet breakpoints for all page templates
 * Breakpoints: 1024px (tablet), 768px (mobile landscape), 480px (mobile portrait)
 */

/* ══════════════════════════════════════════
   GLOBAL — applies to all pages
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Page hero — used on all interior pages */
  .page-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .page-hero h1 {
    font-size: clamp(36px, 6vw, 56px) !important;
  }
}

@media (max-width: 768px) {
  .page-hero-inner {
    padding-left: var(--px) !important;
    padding-right: var(--px) !important;
  }
  .page-hero::after { height: 40px; }

  /* Global form rows — stack on mobile */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Breadcrumb — smaller text */
  .breadcrumb { font-size: 10px; }

  /* Section padding reduction */
  .section-pad { padding: clamp(48px,8vw,80px) 0; }
}

/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* About: mission/vision grid */
  .page-hero-inner > div:last-child {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* About: what we do pillars */
  .section-pad [style*="grid-template-columns: repeat(auto-fit, minmax(240px"] {
    grid-template-columns: 1fr !important;
  }

  /* About: leadership grid */
  .section-pad [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* About: state chapters */
  .section-pad [style*="grid-template-columns: repeat(auto-fill, minmax(260px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* About: milestones timeline */
  .section-pad [style*="max-width: 680px"] .rv > div:first-child {
    width: 32px !important;
    height: 32px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 480px) {
  /* About: state chapters single col */
  .section-pad [style*="grid-template-columns: repeat(auto-fill, minmax(260px"] {
    grid-template-columns: 1fr !important;
  }
  /* About: hero stats grid */
  .page-hero-inner > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════
   MEMBERSHIP PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Membership tiers — 2 col then 1 col */
  #tiers .wrap > div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Registration form layout */
  #register .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Login section */
  #login .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  /* Tiers single column */
  #tiers .wrap > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Membership hero benefits list */
  .page-hero-inner > div:last-child {
    display: none; /* Hide on mobile — too tall, content is in the form below */
  }

  /* Registration form card padding */
  #register .wrap > div > div:last-child > div {
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Tier cards full width */
  .tier-card { padding: 20px !important; }
}

/* ══════════════════════════════════════════
   PROGRAMMES PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Happy Artisans layout */
  #happy-artisans .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Certification tracks */
  #certification .wrap > div[style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  /* Summit section */
  #summit .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Coming soon */
  .section-pad [style*="grid-template-columns: repeat(auto-fit, minmax(260px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Certification tracks — 2 col */
  #certification .wrap > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Happy artisans stats */
  #happy-artisans [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Summit features list readable */
  #summit > div > div > div:last-child > div > div {
    font-size: .82rem !important;
  }

  /* Coming soon — single col */
  .section-pad [style*="grid-template-columns: repeat(auto-fit, minmax(260px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Certification tracks — single col */
  #certification .wrap > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Programmes hero stats */
  .page-hero-inner > div:last-child {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════
   PARTNERSHIPS PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Why partner grid */
  .section-pad [style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Tier cards */
  #tiers .wrap > div[style*="grid-template-columns: repeat(auto-fit, minmax(240px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Category sponsorship */
  .section-pad [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* How it works — 4 steps */
  .section-pad [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  /* Hide the connecting line on tablet */
  .section-pad [style*="grid-template-columns: repeat(4,1fr)"] > div[style*="position: absolute"] {
    display: none !important;
  }

  /* Enquiry form */
  #enquiry .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 768px) {
  /* Why partner — single col */
  .section-pad [style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Tier cards — single col */
  #tiers .wrap > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* How it works — single col */
  .section-pad [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Category grid */
  .section-pad [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Summit note banner — stack */
  .section-pad + section > div > div[style*="display: flex; align-items: center; justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .section-pad [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   DIRECTORY PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Sidebar + grid layout — stack */
  .wrap > div[style*="grid-template-columns: 260px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar becomes horizontal filter bar */
  .dir-sidebar {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
  }
  .dir-sidebar h3 { grid-column: 1 / -1; margin-bottom: 0; }
  #clearFilters   { grid-column: 1 / -1; }

  /* Member grid — 3 col */
  #memberGrid {
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr)) !important;
  }
}

@media (max-width: 768px) {
  /* Directory hero stats — wrap */
  .page-hero-inner > div:last-child > div[style*="display: flex; gap: 16px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Filter sidebar — single col */
  .dir-sidebar {
    grid-template-columns: 1fr !important;
  }

  /* Member grid — 2 col */
  #memberGrid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Member modal full screen */
  #memberModal {
    width: calc(100vw - 16px) !important;
    max-height: 92vh !important;
    top: 4vh !important;
    transform: translateX(-50%) scale(.95) !important;
    left: 50% !important;
  }
  #memberModal.open {
    transform: translateX(-50%) scale(1) !important;
  }
}

@media (max-width: 480px) {
  /* Member grid — single col */
  #memberGrid {
    grid-template-columns: 1fr !important;
  }

  /* Pagination wrap */
  #dirPagination { gap: 4px !important; flex-wrap: wrap; justify-content: center; }
  .pag-btn { padding: 6px 10px !important; font-size: .8rem !important; }
}

/* ══════════════════════════════════════════
   NEWS / ARCHIVE PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Featured article — stack */
  .feat-card {
    flex-direction: column !important;
  }
  .feat-card .feat-img {
    width: 100% !important;
    min-height: 280px !important;
  }

  /* Articles + sidebar — stack */
  .articles-layout {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar becomes bottom section */
  .articles-layout > aside {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* News grid — 2 col */
  .articles-layout > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Category filter tabs — scroll */
  .articles-layout > div > div[style*="display:flex;gap:4px"] {
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .articles-layout > div > div[style*="display:flex;gap:4px"] a {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* News grid — single col */
  .articles-layout > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar — single col */
  .articles-layout > aside {
    grid-template-columns: 1fr !important;
  }

  /* Media kit grid */
  .section-pad [style*="grid-template-columns: 1fr 1fr"][style*="gap: clamp(48px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════
   SINGLE NEWS ARTICLE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Article + sidebar — stack */
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] > aside {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] > aside {
    grid-template-columns: 1fr !important;
  }
  /* Share buttons — wrap */
  main .wrap > div > div[style*="display:flex;align-items:center;gap:12px;margin-top:40px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════════
   SINGLE MEMBER PROFILE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] > aside {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  main .wrap > div[style*="grid-template-columns: 1fr 300px"] > aside {
    grid-template-columns: 1fr !important;
  }
  /* Hero avatar + name — stack on very small */
  .page-hero-inner > div[style*="display:flex;gap:24px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Quick contact cards — 2 col */
  .page-hero-inner > div[style*="grid-template-columns: repeat(auto-fill, minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Form + details — stack */
  #contact-form .wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* State reps + socials sidebar — 2 col */
  #contact-form .wrap > div > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: static !important;
  }
}

@media (max-width: 768px) {
  /* Quick cards — single col */
  .page-hero-inner > div[style*="grid-template-columns: repeat(auto-fill, minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Sidebar — single col */
  #contact-form .wrap > div > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* FAQ max-width */
  .section-pad [style*="max-width: 720px"] { max-width: 100% !important; }
}

@media (max-width: 480px) {
  .page-hero-inner > div[style*="grid-template-columns: repeat(auto-fill, minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
  /* Enquiry type buttons — wrap */
  #contact-form [style*="display:flex;gap:8px;flex-wrap:wrap"] {
    gap: 6px !important;
  }
}

/* ══════════════════════════════════════════
   FOOTER — RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .fg { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 640px) {
  .fg { grid-template-columns: 1fr !important; }
  .fb2 { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ══════════════════════════════════════════
   GLOBAL UTILITY — inline grid overrides
   These catch any grid layouts using inline
   styles that weren't caught above
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Any two-column inline grid becomes single col */
  [style*="grid-template-columns: 1fr 1fr"]:not(.form-row):not(.dir-sidebar):not(.hp-about-stats) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Flex rows that should wrap on mobile */
  [style*="display:flex"][style*="gap:12px"],
  [style*="display: flex"][style*="gap: 12px"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  /* Buttons — full width on small screens */
  .btn-lg { width: 100%; justify-content: center; }

  /* Reduce hero font sizes */
  .page-hero h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  /* Wrap hero action buttons */
  .page-hero-inner .hp-actions,
  .page-hero-inner [style*="display:flex;gap:12px"] {
    flex-direction: column !important;
  }

  /* Tier cards padding */
  .tier-card { padding: 18px !important; }

  /* Form card padding */
  [style*="border-radius: var(--r-xl)"][style*="padding: 32px"] {
    padding: 20px !important;
  }
}