/**
 * The V2 blocks: lead slider, store slider, section slider.
 *
 * Loaded on every page V2 may take over — the homepage, and (phase 3) a town
 * page — for both the admin preview and the public launch. One rule decides
 * both the markup and this file: threeorod_home_v2_surface() &&
 * threeorod_home_v2_active(), so the CSS can never land on a page without the
 * blocks, or the blocks on a page without the CSS.
 */

.home-v2-preview-badge {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 10000;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--color-on-primary);
  background: var(--color-primary);
  box-shadow: 0 4px 18px rgba(26, 28, 28, 0.2);
  font-size: 13px;
  font-weight: 700;
}

/* The one <h1>. The owner does not want it on screen, so it is hidden from
   sight but kept in the HTML and in the accessibility tree: Google still reads
   the country keyword in the page's first heading, and a screen reader still
   announces what the page is. This is the standard clip technique, not
   hidden-text spam - the words are the same as the <title> and describe exactly
   what the page shows. Left as a real element, never display:none. */
.home-v2-pagetitle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-lead {
  margin-block: 12px;
}

.home-lead__grid {
  display: grid;
  gap: 16px;
}

.home-lead__stage {
  /* Which physical side an arriving slide comes from: -1 = the left. JS flips
     it per direction and per language before every change. See initHeroSlider. */
  --enter: -1;

  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-low);
  isolation: isolate;
}

/* Slides move in and out instead of cross-fading, so you can see one leave and
   the next arrive. A waiting slide parks one full width off-stage on the side
   it will enter from; the one being replaced goes the opposite way. The stage
   clips both. transform never affects layout, so the mobile stage still sizes
   itself to its tallest slide. */
.home-lead__slide {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border-radius: var(--radius-lg);
  color: var(--color-on-surface);
  background: var(--color-surface-card);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(calc(var(--enter) * 100%));
  transition: transform .38s ease, visibility 0s linear .38s;

  /* Room below the floated card for the dots, which are positioned against the
     stage. Cancelled at 768px, where the card is absolute and centred. */
  padding-block-end: 34px;
}

.home-lead__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Opacity deliberately does NOT animate. The two slides tile the stage exactly
   while they move - one covers the half the other has left - so fading them
   would make both half-transparent at the midpoint and show the grey stage
   through the middle. The leaving slide stays fully opaque until visibility
   flips at the end of the slide. */
.home-lead__slide.is-leaving {
  opacity: 1;
  transform: translateX(calc(var(--enter) * -100%));
}

.home-lead__slide:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.home-lead__media {
  display: block;
  inline-size: 100%;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-container-low);
}

/* <picture> is inline by default, which would break the img's block-size:100%.
   Only present when a post has a separate phone picture. */
.home-lead__picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.home-lead__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Phone: the card floats UP over the bottom of the picture instead of sitting
   under it. The picture stays in normal flow at its true 4:3 shape, so the
   banner is never cropped on the screen that carries ~90% of the traffic - a
   4:3 picture forced into a portrait box would lose ~44% of its width and cut
   the end units off. The negative margin does the overlap. */
.home-lead__body {
  position: relative;
  z-index: 2;
  display: flex;
  min-block-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: -52px;
  margin-inline: 12px;
  padding: 18px 16px;
  border-radius: 18px;
  color: var(--color-on-surface);
  background: var(--color-surface-card);
  box-shadow: 0 6px 20px rgba(26, 28, 28, .16);
  text-align: center;
}

/* The badge pill. Typed by hand in the editor box - see 3orod-core section 8d.
   Soft tint rather than solid primary: it sits above the headline, and a solid
   red block there pulls the eye off the headline it is supposed to introduce. */
.home-lead__badge {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-card));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.home-lead__headline {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The class is still called --two-tone but the owner chose ONE colour for both
   lines (#8f000d, i.e. --color-primary). What the split still earns is the line
   BREAK: it puts a hand-typed headline on two deliberate lines instead of
   wherever the box happens to wrap. Split server-side on the dash the author
   types - see home-hero.php.
   The clamp is dropped here on purpose: a hand-typed headline is already short,
   and -webkit-line-clamp behaves inconsistently once the box has block children.
   NO letter-spacing anywhere near this. Arabic is a joined script and spacing
   the letters stretches the joins until the words look broken - that advice is
   for Latin type only. Extra LINE spacing is fine and is what is used here. */
.home-lead__headline--two-tone {
  display: block;
  line-height: 1.5;
  -webkit-line-clamp: none;
}

.home-lead__headline-a,
.home-lead__headline-b {
  display: block;
}

.home-lead__sub {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-lead__date {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.4;
}

.home-lead__cta {
  display: inline-flex;
  min-block-size: 40px;
  align-items: center;
  gap: 4px;
  margin-block-start: 4px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  color: var(--color-on-primary);
  background: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
}

/* Phones get no arrows - they swipe instead (see initHeroSlider in script.js).
   Two 44px buttons sitting on a 343px-wide picture cover a quarter of it, and a
   thumb reaches neither comfortably. They come back at 768px with the mouse.

   Both arrows sit as a PAIR at the bottom of the PICTURE side, not one at each
   edge of the card. Measured on the live page: with one at each edge the
   right-hand arrow occupied x1517-1561 while the text ran to x1543 - a 26px
   overlap, dead across the headline. The text is right-aligned to the panel
   edge, so an arrow at that edge will always sit on top of it. Bottom of the
   picture is the emptiest part of a hero banner, and it mirrors the dots at
   the bottom of the panel. */
.home-lead__arrow {
  position: absolute;
  inset-block-end: 16px;
  z-index: 5;
  display: none;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  color: var(--color-on-surface);
  background: var(--color-surface-card);
  box-shadow: 0 1px 4px rgba(26, 28, 28, .18);
}

.home-lead__arrow:hover,
.home-lead__arrow:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* inline-END is the physical LEFT in Arabic, so the pair reads next|prev from
   the left - which is the correct order when "forward" is leftward. */
.home-lead__arrow--prev {
  inset-inline-end: 68px;
}

.home-lead__arrow--next {
  inset-inline-end: 16px;
}

[dir="rtl"] .home-lead__arrow .icon {
  transform: scaleX(-1);
}

.home-lead__dots {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The picture and the panel swapped sides, so the dots now sit over the
   PICTURE, which can be any colour. The old flat #e8e8e8 disappeared on a pale
   photo. A translucent white body plus a hairline ring reads on a white panel,
   on an icy-blue banner and on a dark cover alike. */
.home-lead__dot {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
}

/* A 10px dot is far too small for a thumb, and on a phone the dots are now the
   only visible control (the arrows are gone, swipe replaced them). This grows
   the tap area to 22px without changing how the dot looks. 22px is also the
   dot pitch (10px + 12px gap), so neighbouring targets touch but never
   overlap - otherwise a tap could land on the wrong slide. */
.home-lead__dot::after {
  position: absolute;
  inset: -6px;
  content: "";
}

.home-lead__dot[aria-current="true"] {
  background: var(--color-primary);
}

.home-lead__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.home-lead__list {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.home-lead__row {
  display: flex;
  min-inline-size: 0;
  min-block-size: 104px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  color: var(--color-on-surface);
  background: var(--color-surface-card);
}

.home-lead__row:hover,
.home-lead__row:focus-visible {
  border-color: var(--color-primary);
}

.home-lead__row-body {
  display: flex;
  min-inline-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}

.home-lead__row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-lead__row-range {
  overflow: hidden;
  color: var(--color-secondary);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-lead__row-date {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-lead__row-date .icon {
  inline-size: 15px;
  block-size: 15px;
  flex: 0 0 15px;
}

.home-lead__row-thumb {
  display: block;
  inline-size: 88px;
  flex: 0 0 88px;
  order: -1;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-surface-container-low);
}

.home-lead__row-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Store + section navigation reuse the coupon-slider chrome from style.css; the
   only bespoke part is how many chips show per view. The V2 chip is smaller than
   V1's .store-scard (92px vs 132px tall), so more fit in one row. */
.browse-stores,
.browse-sections {
  display: flex;
  align-items: center;
  gap: 12px;
}

.browse-stores > .section-head,
.browse-sections > .section-head {
  flex: 0 0 auto;
  margin-block-end: 0;
}

.browse-stores > .section-head .section-title,
.browse-sections > .section-head .section-title {
  font-size: 20px;
  line-height: 28px;
  white-space: nowrap;
}

.browse-stores > .coupon-slider,
.browse-sections > .coupon-slider {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.browse-stores .coupon-slide,
.browse-sections .coupon-slide {
  display: flex;
}

/* Fixed flex-bases keep chip sizing independent of the translated row title. */
.browse-stores .coupon-slide {
  flex: 0 0 96px;
}

.browse-sections .coupon-slide {
  flex: 0 0 clamp(128px, 14vw, 168px);
}

/* The shared .slider-arrow sits at calc(50% - 6px) to compensate the coupon
   track's negative block margin. On a 200px coupon card that 6px is invisible;
   on a 92px store chip and a ~52px section chip it reads as "not centred". The
   track's negative margin already cancels its own padding, so the chips really
   are centred at 50% of .coupon-slider — drop the offset on these two rows. */
.browse-stores .slider-arrow,
.browse-sections .slider-arrow {
  inset-block-start: 50%;
}

.browse-stores__chip,
.browse-sections__chip {
  width: 100%;
}

.browse-stores__chip {
  display: flex;
  min-width: 0;
  height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 4px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  color: var(--color-on-surface);
  background: var(--color-surface-card);
}

.browse-stores__chip:hover,
.browse-stores__chip:focus-visible,
.browse-sections__chip:hover,
.browse-sections__chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.browse-stores__media,
.browse-stores__logo,
.browse-stores__initial {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
}

.browse-stores__logo {
  object-fit: contain;
}

.browse-stores__initial {
  border-radius: 50%;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-card));
  font-size: 22px;
  font-weight: 700;
}

.browse-stores__label {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-sections__chip {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--color-hairline);
  border-radius: 11px;
  color: var(--color-on-surface);
  background: var(--color-surface-card);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.browse-sections__icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  object-fit: contain;
}

.browse-sections__icon svg {
  width: 24px;
  height: 24px;
}

.browse-sections__label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 768px) {
  .home-lead__stage {
    display: block;
    block-size: auto;
    aspect-ratio: 21 / 9;
  }

  .home-lead__slide {
    position: absolute;
    inset: 0;
    padding-block-end: 0;
  }

  .home-lead__arrow {
    display: grid;
  }

  /* Bottom-right, below the floating card, on the picture. The card is capped
     at 100% - 80px and centred, so its lowest edge is 40px above the slide
     bottom while the dots reach 26px - they can never meet. */
  .home-lead__dots {
    inset-inline-end: auto;
    inset-inline-start: 32px;
  }

  /* ── The floating-card hero (owner concept, 2026-08-20) ──────────────────
     Replaces the split panel and the S curve. The picture now owns the WHOLE
     slide and the text sits in a white card floating on top of it. No boundary
     between two halves means no boundary to shape, which is why this is both
     simpler and better looking than anything we tried to draw.

     The picture fills the slide, so the two modes differ only in FIT:
       photo (article) - cover, the banner fills the slide
       flyer (offer)   - contain, and it is pushed clear of the card, because a
                         1810x2560 cover inside an 838x357 slide would show a
                         band about 14% of the flyer, and people read prices off
                         these. A flyer keeps exactly the width it had before. */
  .home-lead__slide {
    display: block;
    background: var(--color-surface-container-low);
  }

  .home-lead__media {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    flex: none;
    aspect-ratio: auto;
  }

  .home-lead__slide--photo .home-lead__image {
    object-fit: cover;
    object-position: center;
  }

  /* Padding, not object-position: contain then centres the flyer inside what
     is left, so it stays clear of the card at every width without a second
     number to keep in step. */
  .home-lead__slide--flyer .home-lead__media {
    padding-inline-start: 46%;
  }

  .home-lead__slide--flyer .home-lead__image {
    object-fit: contain;
    object-position: center;
  }

  .home-lead__body {
    position: absolute;
    inset-inline-start: 24px;
    inset-block-start: 50%;
    inline-size: 40%;
    max-block-size: calc(100% - 80px);
    justify-content: center;
    gap: 10px;
    padding: 26px 28px;
    border-radius: 20px;
    background: var(--color-surface-card);
    box-shadow: 0 6px 24px rgba(26, 28, 28, .18);
    transform: translateY(-50%);

    /* The phone rules give the card a negative top margin and side margins to
       float it over the picture. Absolute positioning here does that job, so
       those margins must be cancelled or they shift the card off its inset. */
    margin: 0;
  }

  .home-lead__badge {
    padding: 6px 14px;
    font-size: 13px;
  }

  /* 2 -> 3 lines. On a phone the panel is the full width and a real article
     title fits in 2 lines; beside a 55% picture the panel is only ~308px of
     text, so 2 lines cut "...السعودية 2026 — أسع" mid-word. The stage is 355px
     tall and 3 lines + date + button needs 264px (320px with a subtitle), so
     there is room. */
  .home-lead__headline {
    font-size: 30px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
  }

  .home-lead__sub {
    font-size: 16px;
  }

  .home-lead__cta {
    min-block-size: 44px;
    padding-inline: 22px;
  }

  :dir(ltr) .home-lead__cta .icon {
    transform: scaleX(-1);
  }
}

@media (min-width: 900px) {
  .home-lead__grid {
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  }

  .home-lead--single .home-lead__grid {
    display: block;
  }

  .home-lead__list {
    display: flex;
    gap: 12px;
  }

  .home-lead__row {
    min-block-size: 0;
    block-size: clamp(76px, 8.75vw, 112px);
  }

  .home-lead__row-thumb {
    inline-size: clamp(60px, 7.5vw, 96px);
    flex-basis: clamp(60px, 7.5vw, 96px);
  }

}

@media (min-width: 1024px) {
  .browse-stores,
  .browse-sections {
    gap: 28px;
  }

  .browse-stores > .section-head,
  .browse-sections > .section-head {
    flex: 0 0 132px;
    margin-block-end: 0;
  }

  .browse-stores > .section-head .section-title,
  .browse-sections > .section-head .section-title {
    font-size: 28px;
    line-height: 36px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .home-lead__slide {
    transition: none;
  }
}