/* ============================================================================
   home.mobile.css — coherent mobile layout for the homepage
   ----------------------------------------------------------------------------
   Single breakpoint: 768px (phones + portrait tablets get the mobile layout).
   Mobile-first DELTAS only — this file holds nothing the desktop already does
   correctly. Loaded AFTER home.css, so these rules win at <=768px.

   Per-block translation of the desktop design (not a squish):
     - multi-column grids        -> single vertical column
     - sidebars                  -> stacked inline below their main content
     - horizontal rails          -> kept horizontal, swipeable
     - hover/inner-scroll cues   -> dropped or replaced with touch equivalents
   ============================================================================ */

@media (max-width: 768px) {

  /* Tighter page gutter on mobile: the shared .container is 16px (tokens.css);
     narrow it to 8px so hero/latest/sections sit closer to the screen edge.
     Scoped to the homepage so article/other pages keep their 16px gutter. */
  .home-main main.container { padding-left: 8px; padding-right: 8px; }

  /* ===== HERO (b1) =========================================================
     Desktop: featured carousel (right) + آخر الأخبار live list (left).
     Single-column collapse already happens at <=1060 in home.css; here we
     redesign the pieces for touch rather than just letting them reflow. */

  /* Small top gap so the inset hero photo breathes under the band above it
     (breaking/special, or the navbar) instead of jamming against it. overflow
     is visible for the sliding rail highlight; the ghosted watermark that
     .b1-hero clips on desktop is already display:none at <=1060 (home.css). */
  .b1-hero { padding: 10px 0 4px; overflow: visible; }
  .b1-hero__grid { gap: 18px; }

  /* Featured carousel photo: inset within the page gutter (NOT full-bleed), so it
     reads as a section-start photo like the سياسة lead and the تقارير promo cards,
     but DELIBERATELY taller than the site's 16:9 default. As the page's lead image
     it earns more height; at full content-width 16:9 came out too short. 3:2 is a
     considered departure (not a copied ratio) — documented per the 16:9 house rule.
     The photo stays ratio-locked and object-fit:cover, so it never distorts. */
  body.home-main .b1-feature__viewport {
    aspect-ratio: 3 / 2;                /* taller than 16:9 — hero gets more height */
    border-radius: var(--r-photo);      /* 8px, curving against the page bg */
    margin-left: 0;
    margin-right: 0;
  }
  /* Overlay/bars re-inset from the true screen edge now that the photo owns it */
  .b1-feature__overlay { padding: 16px 16px 14px; }
  .b1-feature__overlay .b1-feature__title { font-size: 19px; line-height: 1.4; }

  /* Top progress bars: slightly tighter on a narrow surface */
  .b1-bars { padding: 10px 12px; gap: 4px; }

  /* Thumbnail rail -> horizontal swipe strip with the desktop sliding-highlight
     box. The box is position:absolute inside the scrolling .b1-rail, so it
     scrolls together with the cards and stays over the active one; the JS
     auto-scrolls the active card into view (see new-home.blade.php) so it is
     never stranded off-screen. The box covers the full card (image + title)
     like desktop, and the rail scrolls smoothly between slides. */
  .b1-rail {
    margin-top: 12px;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-behavior: smooth;
  }
  .b1-rail::-webkit-scrollbar { display: none; }
  .b1-rail__item {
    /* Card = the shared small-thumb (--thumb-row-sm) + 4px padding each side
       (border-box), so the rail thumb matches every other small mobile thumb
       (137x77 via --ar-photo) while keeping ~2.5 cards visible to invite the
       swipe. Fixed width stops the 2-line title from stretching the card. */
    flex: 0 0 calc(var(--thumb-row-sm) + 8px);
    max-width: calc(var(--thumb-row-sm) + 8px);
    padding: 4px;         /* room for the highlight box to sit around the card */
    scroll-snap-align: start;
  }
  .b1-rail__hl { display: block; }
  .b1-rail__item.is-active .b1-rail__thumb {
    box-shadow: none;
  }
  .b1-rail__title { font-size: 12px; }

  /* آخر الأخبار: flows as a plain vertical list (set at <=1060). Kill the
     desktop inner-scroll cues that otherwise float loose over the page. */
  .b1-vtrack,
  .b1-latest__fade,
  .b1-latest__more { display: none; }
  .home-main .b1-latest__list { padding-left: 0; padding-inline-start: 0; }
  .b1-latest__head { padding-bottom: 12px; }
  /* Card-less list: drop the row dividers, give the thumbs more visual weight */
  .b1-latest__item { border-bottom: 0; }
  /* width only — the 16:9 ratio comes from --ar-photo (home.css).
     Shared small-thumb width (~77px tall), matched to BBC mobile sub-story thumbs. */
  .b1-latest__thumb { width: var(--thumb-row-sm); }
  /* 16px headline — the one row-family title size (dj rows + lead list rows are
     already 16px; latest was the lone 15px near-miss). */
  .b1-latest__hl { font-size: 16px; }

  /* Cap the latest list to 4 items on mobile; the "المزيد" link continues to
     the full news page. Desktop keeps the full scrollable list (untouched). */
  .b1-latest__item:nth-child(n+5) { display: none; }
  .b1-latest__seemore {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
  }
  .b1-latest__seemore span { transition: transform .2s ease; }
  .b1-latest__seemore:active span { transform: translateX(-4px); }

  /* Beige bands (.rd-bg-white, tinted to --surface-3 on this route) already
     announce themselves by their tint, so the 2px navy section separator on
     their header doubles up on a boundary the background is drawing anyway.
     Drop it — the same reason .v3x-dark opts out in home.css. */
  body.home-main .rd-bg-white .rd-section-head {
    border-top: none;
    padding-top: 0;
  }

  /* ===== 4-UP CARD FAMILY — one card width across all card sections ==========
     عربي ودولي (band mosaic), ثقافة ومجتمع + منوعات (plain mosaic), and
     علوم وتكنولوجيا (cat-grid) are the same visual class of section — a row of
     equal-weight cards — and should render at one card width on mobile.

     Two things broke that:
       1. Band sections carry a 28px inset (desktop pulls content in from the
          full-viewport beige bleed). On mobile that narrows their cards to ~160
          against the plain sections' ~180. Drop the inset to the 8px page gutter
          so the band's content aligns to the same edge as everything else — the
          beige still bleeds full-width, only its content re-aligns.
       2. The cat-grid collapses to a single full-width column at <=640px in
          home.css, leaving علوم وتكنولوجيا stacked (~374) instead of 2-up.
     Keep the grid 2-up and match the mosaic's 14px column gap, so every card in
     the family lands at (374 - 14) / 2 = 180px. */
  body.home-main .new-home-v3 .rd-bg-white {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.home-main .rd-cat-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }

  /* ===== تقارير — two large promo cards (BBC "Only from the BBC") ===========
     Six wide-list cards turn into an endless scroll on a phone, and reports are
     the section that most rewards a big photo. Mobile shows only the first two,
     each as a full promo: 16:9 photo, headline, three-line summary, timestamp,
     with a hairline between them. The other four live behind "كل التقارير".
     Opt-in via $sectionClass — أمنية (the other cat-list user) and every desktop
     breakpoint still render all six as two columns of horizontal cards. */
  .rd-list-promo .rd-list { gap: 0; }
  .rd-list-promo .rd-list__card:nth-child(n+3) { display: none; }
  .rd-list-promo .rd-list__card { flex-direction: column; gap: 0; }
  .rd-list-promo .rd-list__card + .rd-list__card {
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid color-mix(in oklab, var(--navy) 20%, #fff);
  }
  .rd-list-promo .rd-list__thumb {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
  .rd-list-promo .rd-list__title {
    margin-top: 12px;
    font-size: 20px; font-weight: 800; line-height: 1.4; -webkit-line-clamp: 3;
  }
  .rd-list-promo .rd-list__excerpt {
    margin-top: 10px; font-size: 15px; -webkit-line-clamp: 3;
  }
  .rd-list-promo .rd-list__time { padding-top: 10px; }

  /* The section only shows two of its six stories, and the header's "more" link
     is hidden on mobile — so the way to the rest has to be an explicit control.
     Navy outline button, shrunk to its label and pushed to the left edge (RTL:
     the inline end, so the auto margin goes on the start side). Filled on tap
     for touch feedback. */
  .rd-list__seemore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-top: 22px;
    margin-inline-start: auto;
    padding: 12px 20px;
    border: 1px solid var(--navy);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
  }
  .rd-list__seemore span { transition: transform .2s ease; }
  .rd-list__seemore:active {
    background: var(--navy);
    color: #fff;
  }
  .rd-list__seemore:active span { transform: translateX(-4px); }

  /* ===== صحافة البيانات — lead promo + thumbnail rows (BBC "World Cup") =====
     Deliberately a different shape from تقارير above, so two photo-led sections
     don't read as the same block twice. The lead carries the section (photo,
     headline, summary), a soft rule closes it, and the remaining stories follow
     as compact rows — small 16:9 thumb beside a headline, no kicker, no
     timestamp. Rows lean on their thumbs for rhythm, so no rules between them.
     Scoped to .rd-dj so v2's .rd-most-read is untouched. */
  .rd-dj .rd-most-read__articles { grid-template-columns: 1fr; gap: 0; }

  .rd-dj .dj-lead {
    padding-bottom: 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--navy) 20%, #fff);
  }
  .rd-dj .dj-lead .thumb { height: auto; aspect-ratio: 16 / 9; }
  .rd-dj .dj-lead h4 { margin: 6px 0 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
  .rd-dj .dj-excerpt {
    margin: 10px 0 0;
    font-size: 15px; line-height: 1.6; color: var(--excerpt);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rd-dj .dj-lead .meta { margin-top: 10px; }

  .rd-dj .dj-txt {
    display: grid;
    /* Shared small-thumb (16:9 -> 77px tall) — one size across the whole mobile
       homepage row family (آخر الأخبار, section list rows, switcher rail). */
    grid-template-columns: var(--thumb-row-sm) 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 14px 0;
  }
  /* The row is a headline and a thumb — the kicker and byline belong to the lead */
  .rd-dj .dj-txt .kicker,
  .rd-dj .dj-txt .meta { display: none; }
  .rd-dj .dj-txt > a { grid-column: 1; }
  .rd-dj .dj-txt .thumb { margin-bottom: 0; }
  .rd-dj .dj-txt h4 { grid-column: 2; margin: 0; font-size: 16px; line-height: 1.5; }

  /* ===== ثقافة ومجتمع / عربي ودولي — mosaic ================================
     An overlay caption needs the photo to be tall enough that the text sits in
     its bottom third. On a phone the four small tiles are half a column wide,
     and 16:9 resolves that to ~101px of height — while the caption (14px text,
     3 lines, 14px padding top and bottom) is a fixed 87px no matter how small
     the tile gets. The headline covered 86% of the photo, 96% in the narrower
     عربي ودولي mosaic, and the scrim washed out whatever was left.

     So the overlay stays a lead treatment, as it is everywhere else on the
     page: only the lead tile keeps it (full-width, 210px tall, 42% covered).
     The four below turn into plain cards — 16:9 photo, headline in ink under
     it — which also fixes white-on-busy-photo legibility that no amount of
     resizing would have. Desktop keeps all five as overlays. */
  body.home-main .rd-mosaic { row-gap: 20px; align-items: start; }

  body.home-main .rd-mosaic__tile:not(.rd-mosaic__tile--lead) {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;      /* the photo carries the ratio now, not the tile */
    height: auto;
    background: none;        /* no navy showing under a transparent caption */
    border-radius: 0;        /* the corner belongs to the photo below */
    overflow: visible;
  }
  /* Was absolutely positioned to fill the tile; now it IS the top of the card. */
  body.home-main .rd-mosaic__tile:not(.rd-mosaic__tile--lead) .rd-mosaic__img {
    position: relative;
    inset: auto;
    aspect-ratio: var(--ar-photo);
    border-radius: var(--r-photo);
    overflow: hidden;
    background: var(--navy);
  }
  /* Nothing to darken for anymore */
  body.home-main .rd-mosaic__tile:not(.rd-mosaic__tile--lead) .rd-mosaic__shade {
    display: none;
  }
  body.home-main .rd-mosaic__tile:not(.rd-mosaic__tile--lead) .rd-mosaic__cap {
    position: static;
    padding: 8px 0 0;
  }
  body.home-main .rd-mosaic__tile:not(.rd-mosaic__tile--lead) .rd-mosaic__title {
    color: var(--ink);
    text-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
  }
}