/**
 * Our Take News — front-page news strip
 *
 * Ships with the plugin and is enqueued only where the strip renders.
 *
 * STATIC BY DESIGN. The strip does not auto-scroll. Auto-rotating carousels
 * attract roughly 1% interaction and actively train banner blindness, so the
 * three latest posts are simply shown at once. Motion is an accent only — the
 * NEW badge and a hover lift — and both are disabled under reduced motion.
 *
 * SCROLL AFFORDANCE IS CSS-ONLY HERE. The table wrapper's JS (otn-table-scroll)
 * toggles directional fades on scroll, which is right for a wide table but
 * would mean shipping JavaScript to the hottest page on the site to service a
 * three-item row. The visual pattern is reused — edge fade plus the same slim
 * brand-blue scrollbar — with no script.
 *
 * @package OurTake\News
 * @since 1.6.0
 */

.otn-strip {
  --otn-blue: #0e8fd0;
  --otn-blue-dark: #0a5f8f;
  --otn-ink: #38373a;
  --otn-ink-soft: #6b6b70;
  --otn-rule: #dfe3e6;
  --otn-surface: #ffffff;

  position: relative;
  width: 100%;
  background: var(--otn-surface);
  border-top: 1px solid var(--otn-rule);
  border-bottom: 1px solid var(--otn-rule);
  /* Height is RESERVED, not merely achieved. The strip sits above the fold on
     the shop front page, so it must occupy its final height before the fonts
     land — otherwise it contributes cumulative layout shift to the one page
     that can least afford it. The value is the MEASURED rendered height rounded
     up (77px desktop, 87px narrow), not an estimate — reserving less than the
     final height leaves a residual shift, which is the whole thing this is
     meant to prevent. */
  min-height: 78px;
  box-sizing: border-box;

  /* Android Chrome inflates font sizes inside text blocks it judges to be wide
     columns ("font boosting"), and it is the one rendering behaviour that is
     active on a real handset and on no desktop browser at the same width. This
     component sets its own type sizes deliberately and clips both the title and
     the teaser to a single line, so boosting can only break it. This site has
     been bitten by it before, in the table-overflow work. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.otn-strip * {
  box-sizing: border-box;
}

.otn-strip__heading {
  margin: 0;
  padding: 0.6rem 1.25rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--otn-ink);
}

/* ── Track ─────────────────────────────────────────────────────────
   The scroll container, the flex container and the list are ONE element. The
   items and the "All news" link are its direct children.

   This used to be a scrolling <div> wrapping a <ul>, and that inner box is
   exactly what broke: it could be sized independently of the items inside it,
   so at narrow widths it collapsed to the track width while its own children
   overflowed it, putting the "All news" link on top of the first headline.
   A single container cannot disagree with itself about its children's widths.

   On desktop the three items fit, so nothing scrolls and the fade is
   suppressed. */

.otn-strip__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--otn-blue) transparent;
}

.otn-strip__track:focus-visible {
  outline: 2px solid var(--otn-blue);
  outline-offset: -2px;
}

.otn-strip__track::-webkit-scrollbar {
  height: 4px;
}

.otn-strip__track::-webkit-scrollbar-track {
  background: transparent;
}

.otn-strip__track::-webkit-scrollbar-thumb {
  background-color: var(--otn-blue);
  border-radius: 999px;
}

/* ── Items ─────────────────────────────────────────────────────────
   Equal width, separated by a hairline rather than a gap, so the row reads
   as one strip instead of three cards. */

.otn-strip__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 1.15rem;
  border-left: 1px solid var(--otn-rule);
  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* Only the separator is dropped on the first item — NOT its padding.
   Zeroing padding-left here made the first item exactly 1.15rem narrower than
   its siblings (measured 360px against 379px), because flex-basis:0 shares out
   content width and each item then adds its own padding on top. The brief asks
   for equal width, so the inset comes from the track's padding instead. */
.otn-strip__item:first-child {
  /* Transparent rather than removed, so the first item keeps the same box
     width as its siblings. Setting border-left:0 left it 1px narrower —
     measured 377px against 378px — which is invisible but means the row is
     not genuinely equal-width as specified. */
  border-left-color: transparent;
}

/* Hover lift, matched to the archive cards so the site has one hover idiom. */
.otn-strip__item:hover,
.otn-strip__item:focus-within {
  transform: translateY( -2px );
  background-color: #fbfdfe;
}

/* ── Eyebrow + NEW badge ───────────────────────────────────────── */

.otn-strip__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--otn-blue);
  line-height: 1.2;
}

.otn-strip__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--otn-blue-dark);
  color: #ffffff;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  /* The only motion in the component, and only on genuinely recent posts. */
  animation: otn-strip-pulse 2.4s ease-in-out infinite;
}

@keyframes otn-strip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Title + teaser ────────────────────────────────────────────────
   Both clamped to one line. The strip's job is to signal that news exists
   and get the click; a wrapping headline would blow the reserved height. */

.otn-strip__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--otn-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.otn-strip__title:hover,
.otn-strip__title:focus {
  color: var(--otn-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.otn-strip__teaser {
  display: block;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--otn-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── All news link ───────────────────────────────────────────────
   The link now sits in its own list item at the end of the row, so the
   flex/spacing behaviour belongs to the cell and the pill only styles itself. */

.otn-strip__end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: 0.9rem;
}

.otn-strip__all {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--otn-blue);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--otn-blue-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.otn-strip__all:hover,
.otn-strip__all:focus {
  background: var(--otn-blue);
  color: #ffffff;
}

/* ── Narrow widths ─────────────────────────────────────────────────
   Same row, swiped rather than laid out. Items get a fixed basis so they
   do not compress into unreadable slivers, and the right-edge fade signals
   that there is more beyond the viewport. */

@media ( max-width: 860px ) {
  .otn-strip {
    min-height: 88px;
  }

  /* A FIXED basis, not a viewport-relative one.
     This was 78vw with a 320px cap, which measures correctly in every desktop
     browser at a narrow window and still failed on a real Android handset — the
     one place the value is resolved against a real mobile viewport rather than
     a resized desktop one. 280px gives the same result at every phone width
     that matters (a full item plus a clear peek of the next on a 360–430px
     screen) while depending on nothing about the device. */
  .otn-strip__item {
    flex: 0 0 280px;
    max-width: 280px;
  }

  /* Edge fade — the static counterpart of the table wrapper's JS fades.
     Anchored to the section, not the scroller, so it does not scroll away. */
  .otn-strip::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient( to left, var(--otn-surface), rgba( 255, 255, 255, 0 ) );
  }

  /* Trailing inset now belongs to the cell, so the last thing in the scroll
     track is padding rather than a pill flush against the edge. */
  .otn-strip__end {
    padding-right: 1.15rem;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────
   Removes the badge pulse and the hover lift outright. Nothing in this
   component depends on motion to be usable. */

@media ( prefers-reduced-motion: reduce ) {
  .otn-strip__badge {
    animation: none;
  }

  .otn-strip__item,
  .otn-strip__all,
  .otn-strip__title {
    transition: none;
  }

  .otn-strip__item:hover,
  .otn-strip__item:focus-within {
    transform: none;
  }
}

@media print {
  .otn-strip {
    display: none;
  }
}