/* ============================================================
   Sporara responsive layer
   Loaded after each page's inline <style> so it overrides desktop rules.
   Two breakpoints: <=1024px (tablet) and <=720px (phone).
   ============================================================ */

/* Universal: prevent horizontal overflow without breaking position:sticky.
   `overflow: clip` (vs hidden) does NOT create a new scroll container, so
   sticky elements inside the page continue to work. */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

/* The mobile "search summary" button is injected on every page but must stay
   hidden on desktop — only the phone breakpoint reveals it. */
.search-summary { display: none; }

/* The active-filter count pill in the sidebar header is mobile-only too. */
.sidebar .sb-head .count-pill { display: none; }

/* ============================================================
   TABLET  (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* --- Generic containers --- */
  .container,
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  /* --- 2-column main layouts collapse to 1 column --- */
  /* listing.html : 280 + 1fr   |   detail pages : 1fr + 380   |   blog : 200 + 1fr   */
  .layout,
  .extras-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Stack sidebars naturally and stop them being sticky */
  .sidebar,
  .toc-col,
  .rail,
  .news-side,
  .side-card { position: static !important; top: auto !important; }

  /* Blog: bring TOC above article on tablet */
  .toc { display: flex !important; flex-wrap: wrap; gap: 4px 6px; }
  .toc .label { width: 100%; }
  .toc a { padding: 6px 10px; border-left: 0 !important; border-radius: 999px;
           background: var(--sp-surface); }
  .toc a.active { background: var(--sp-ink); color: #fff !important; }

  /* --- 3- & 4-col grids ease to 2 cols --- */
  .cards.c4,
  .cards.c3,
  .featured,
  .dest-grid,
  .tier-grid,
  .incl-grid,
  .outcomes,
  .highlights,
  .related-grid,
  .bundle-tiles,
  .bundle-hero .grid,
  .tactic { grid-template-columns: 1fr 1fr !important; }

  /* All-sports grid in kategoriler.html */
  .all-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ---- Listing page: card grid + toolbar + map ---- */
  .main .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .main .toolbar { flex-wrap: wrap; gap: 10px !important; }
  .main .right-tools { flex-wrap: wrap; }
  .map-canvas { height: 260px !important; }
  /* List view card layout: shrink photo column */
  .main .grid.view-list .card { grid-template-columns: 180px 1fr !important; }
  .main .grid.view-list .photo { min-height: 140px !important; }
  /* Map view 2-col compact still fits */
  .main .grid.view-map { grid-template-columns: 1fr !important; }
  .main .grid.view-map .card { grid-template-columns: 110px 1fr !important; }

  /* Stats: 5 → wrap */
  .stats { grid-template-columns: repeat(3, 1fr) !important; }
  .stats .s:nth-last-child(-n+2) { border-right: 0; }

  /* Hero gallery (experience-detail) */
  .hero-gallery { grid-template-columns: 1fr 1fr !important; height: 400px !important; }
  .hero-gallery .gphoto.main { grid-row: span 1 !important; grid-column: span 2; }

  /* Hero & banner sections — split columns stack */
  .hero,
  .hero-strip,
  .bundle-hero,
  .editorial,
  .cta,
  .cta-band,
  .final-combo,
  .corporate-band { grid-template-columns: 1fr !important; padding: 28px !important; gap: 20px !important; }

  /* Hero collage / decorative tiles — hide on tablet to save room */
  .collage,
  .hero .right { display: none !important; }

  /* Search pill: 5-col grid collapses to vertical list */
  .search-pill { grid-template-columns: 1fr !important; border-radius: 22px !important; }
  .search-pill .cell { border-right: 0 !important; border-bottom: 1px solid var(--sp-line); }
  .search-pill .cell:last-of-type { border-bottom: 0; }
  .search-pill .go { width: 100% !important; margin: 6px !important; height: 48px; }
  /* Summary header for the collapsed pill — hidden on tablet (we still show the full pill) */
  .search-summary { display: none !important; }

  /* Value strip on package detail */
  .value-strip { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .value-strip .cell { border-right: 0 !important; padding: 8px 4px !important; }
  .value-strip .cta { grid-column: 1 / -1; width: 100%; justify-content: center; }

  /* Top nav: pack actions, ellipsize breadcrumb */
  .top-nav .row { flex-wrap: wrap; gap: 10px !important; }
  .breadcrumb { font-size: 12px; flex-wrap: wrap; }

  /* Article column */
  .article-col { max-width: none !important; }

  /* Big display headings shrink */
  h1.display-xl, .display-xl { font-size: clamp(40px, 8vw, 64px) !important; }
}

/* ============================================================
   PHONE  (max-width: 720px)
   ============================================================ */
@media (max-width: 720px) {

  body { font-size: 15px; }

  /* Containers and wraps: tighter gutters */
  .container,
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* Section-head: stack title + link */
  .section-head { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .section-head h2 { font-size: 24px !important; }

  /* Section headings shrink */
  h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero h1,
  .bundle-hero h1 { font-size: clamp(36px, 11vw, 56px) !important; }
  .display-xl, .display-l, .display-m { font-size: clamp(36px, 10vw, 56px) !important; }

  /* All multi-col grids → 1 col */
  .cards.c4,
  .cards.c3,
  .featured,
  .dest-grid,
  .tier-grid,
  .incl-grid,
  .outcomes,
  .highlights,
  .related-grid,
  .bundle-tiles,
  .bundle-hero .grid,
  .stats,
  .editorial { grid-template-columns: 1fr !important; }
  .featured .cat-tile.big { grid-row: span 1 !important; }

  /* Sport cards grid: 2 cols on phone */
  .all-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .sport-card { padding: 14px 12px !important; gap: 8px !important; }
  .sport-card .meta { font-size: 11px !important; }

  /* Heroes: tighter padding */
  .hero,
  .hero-strip,
  .bundle-hero { padding: 24px !important; min-height: 0 !important; border-radius: 22px !important; }
  .hero-strip .count { font-size: 56px !important; text-align: left !important; }

  /* Hero gallery: 1 visible big tile, rest hidden */
  .hero-gallery { grid-template-columns: 1fr !important; height: 240px !important; }
  .hero-gallery .gphoto.main { grid-column: 1 / -1; }
  .hero-gallery .gphoto:not(.main) { display: none !important; }

  /* Stats rows */
  .stats { grid-template-columns: 1fr 1fr !important; }
  .stats .s { padding: 16px 18px !important; border-right: 0 !important; }
  .stats .s:not(:last-child) { border-bottom: 1px solid var(--sp-line); }

  /* Top nav (listing/detail/blog): smaller nav, hide secondary buttons */
  .top-nav .row { padding: 10px 0 !important; }
  .nav-btn, .icon-btn { padding: 8px 10px !important; font-size: 12px; }
  .nav-btn span, .nav-btn:not([aria-label="Tüm sayfalar"]) span { }
  /* Hide "Favoriler" + "Tüm sayfalar" labels on small screens */
  .top-nav .row > .nav-btn { width: 38px; padding: 0 !important; justify-content: center; }
  .top-nav .row > .nav-btn svg { margin: 0 !important; }
  .top-nav .row > .nav-btn:not(.primary) span,
  .top-nav .row > .nav-btn:not(.primary) { font-size: 0 !important; }
  .top-nav .row > .nav-btn.primary { padding: 8px 14px !important; font-size: 13px !important; width: auto; }

  /* Jump-nav becomes horizontally scrollable */
  .jump-nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .jump-nav a { flex: 0 0 auto; }

  /* Blog TOC: compact horizontally scrolling chips */
  .toc { overflow-x: auto; flex-wrap: nowrap !important; padding: 4px 0; }
  .toc .label { font-size: 11px; }
  .toc a { white-space: nowrap; font-size: 12.5px; }

  /* Text-size inline segmented control — 42px: aksiyon çubuğundaki diğer butonlarla
     (Takip Et + ikon butonları) aynı yükseklik, tutarlı görünüm + dokunma alanı. */
  .text-size-inline { height: 42px !important; }

  /* Author strip stacks */
  .author-strip { flex-direction: column; align-items: flex-start !important; }
  .author-strip .actions { width: 100%; flex-wrap: wrap; }

  /* Share popover: anchor flexible */
  .share-pop { right: auto !important; left: 0 !important; min-width: 220px !important; }
  .share-pop::before { right: auto; left: 14px; }

  /* CTA & cards padding */
  .cat-tile, .sport-card, .card, .tier, .review, .week, .lesson { border-radius: 16px !important; }
  .cat-tile { padding: 16px !important; }
  .cat-tile .name { font-size: 22px !important; }
  .cat-tile.big .name { font-size: 36px !important; }

  /* FAQ */
  .faq .q { padding: 12px 14px !important; }
  .faq .a { padding: 12px 14px !important; }

  /* Page-tabs (in some detail pages) scroll horizontally */
  .page-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .page-tabs a { flex: 0 0 auto; }

  /* Sidebar / filter panel — collapsible header on phone --------------- */
  .sidebar {
    padding: 0 !important;
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
  }
  .sidebar .sb-head {
    padding: 14px 18px !important;
    cursor: pointer;
    user-select: none;
    margin: 0 !important;
  }
  .sidebar .sb-head .ttl { display: inline-flex; align-items: center; gap: 8px; }
  .sidebar .sb-head .ttl::after {
    content: '';
    width: 12px; height: 12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7488' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 200ms var(--ease-out);
    display: inline-block;
  }
  .sidebar .sb-head .count-pill {
    display: inline-block;
    margin-left: 4px; padding: 2px 8px; border-radius: 999px;
    background: var(--sp-blue-50); color: var(--sp-blue);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  }
  .sidebar .sb-head .count-pill:empty { display: none; }
  .sidebar.open .sb-head .ttl::after { transform: rotate(180deg); }
  /* Hide body until opened */
  .sidebar:not(.open) > .sb-section,
  .sidebar:not(.open) > button { display: none !important; }
  .sidebar.open > .sb-section { padding-left: 18px !important; padding-right: 18px !important; }
  .sidebar.open > .sb-section:first-of-type { padding-top: 8px !important; }
  .sidebar.open > button { margin: 14px 18px 16px !important; width: calc(100% - 36px) !important; }

  /* ---- Listing page on phone ---- */
  .main .grid { grid-template-columns: 1fr !important; }
  .main .grid.view-list .card { grid-template-columns: 1fr !important; }
  .main .grid.view-list .photo { aspect-ratio: 16/10; min-height: 0 !important; }
  .main .grid.view-map { grid-template-columns: 1fr !important; }
  .main .grid.view-map .card { grid-template-columns: 1fr !important; }
  .map-canvas { height: 220px !important; border-radius: 16px !important; }
  .map-canvas .pin { font-size: 11px; padding: 4px 8px; }
  .main .toolbar .count { font-size: 16px !important; }
  .main .toolbar { padding-bottom: 10px; }
  /* Sort dropdown anchors to right of viewport edge */
  .sort-pop { right: auto !important; left: 0 !important; min-width: 200px !important; }
  /* Hero-strip count font on phone */
  .hero-strip .count { font-size: 56px !important; text-align: left !important; }

  /* ---- Search pill: collapsed by default on phone ----------------------- */
  .search-pill { display: block !important; padding: 0 !important; overflow: hidden; }
  .search-pill .search-summary {
    display: flex !important; align-items: center; gap: 10px;
    padding: 14px 18px; cursor: pointer; user-select: none;
    background: #fff; width: 100%; border: 0; font: inherit;
    text-align: left;
  }
  .search-pill .search-summary .ico {
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--sp-blue); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  }
  .search-pill .search-summary .ico svg { width: 15px; height: 15px; }
  .search-pill .search-summary .txt {
    flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--sp-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .search-pill .search-summary .chev {
    width: 14px; height: 14px; color: var(--sp-mute); flex: 0 0 auto;
    transition: transform 180ms var(--ease-out);
  }
  /* Hide all cells + Go button by default; reveal when .open */
  .search-pill .cell,
  .search-pill .go { display: none !important; }
  .search-pill.open { display: block !important; }
  .search-pill.open .cell { display: flex !important; border-bottom: 1px solid var(--sp-line) !important; }
  .search-pill.open .cell:last-of-type { border-bottom: 0 !important; }
  .search-pill.open .go { display: grid !important; width: calc(100% - 12px) !important; }
  .search-pill.open .search-summary .chev { transform: rotate(180deg); color: var(--sp-blue); }
  /* Chip-row scroll horizontally */
  .chip-row { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .chip-row .chip { flex: 0 0 auto; }

  /* Footer site footer */
  footer.site .row { grid-template-columns: 1fr 1fr !important; }
  footer.site .bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Tactic block (blog) stacks */
  .tactic { grid-template-columns: 1fr !important; }
  .tactic .num { font-size: 24px !important; }

  /* Featured posts / related cards horizontal rail keeps width */
  .related-rail { padding-left: 16px !important; padding-right: 16px !important; }
  .related-card { flex: 0 0 78% !important; }

  /* Pages index page (pages.html) — uses auto-fill already, just ease padding */
  .wrap { padding-top: 28px !important; padding-bottom: 64px !important; }
}

/* ============================================================
   PHONE — extra-small (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .all-grid { grid-template-columns: 1fr !important; }
  footer.site .row { grid-template-columns: 1fr !important; }
}