/* ---------- Continue reading popup (continue-popup.js) ----------

   Layout follows the Sahara Reporters / Taboola "Keep on reading" overlay.
   On phones it is a bottom sheet that touches the bottom; on tablet/desktop
   it becomes a centered panel with the blurred page visible around it. Inside
   either shape it is a magazine mix of a horizontal rail and a grid whose
   every seventh card is a full-width horizontal banner. */

.continue-popup {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
}

.continue-popup.is-visible {
  display: block;
}

/* The whole page behind the sheet is dimmed and blurred. The sheet only
   covers everything but a strip at the very top, so that strip is where the
   blur clearly shows through and where "outside the box" taps land. */
.continue-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 27, 44, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.continue-popup.is-open .continue-popup-backdrop {
  opacity: 1;
}

/*  Sheet: full width, reaches the bottom, small margin at the top only
    (phones). The @media (min-width: 768px) block below turns this into a
    centered, phone-width placard that floats clear of every edge.
    Configurable via CSS vars: --continue-sheet-mobile-height (60vh default),
    --continue-sheet-mobile-top (24px). Set --continue-revert-full:1 to restore old behavior. */
.continue-popup-sheet {
  position: absolute;
  top: var(--continue-sheet-mobile-top, 24px);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateY(120px) perspective(1200px) rotateX(8deg) scale(0.98);
  transform-origin: bottom center;
  transition: transform 0.48s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.36s ease;
  will-change: transform, opacity;
}

@media (max-width: 767px) {
  .continue-popup-sheet {
    top: calc(100vh - var(--continue-sheet-mobile-height, 60vh));
    height: var(--continue-sheet-mobile-height, 60vh);
    max-height: var(--continue-sheet-mobile-height, 60vh);
    bottom: auto;
  }
  /* Optional revert to old full-coverage behavior */
  .continue-popup[data-continue-revert-full="1"] .continue-popup-sheet,
  .continue-popup.continue-popup--revert .continue-popup-sheet {
    top: var(--continue-sheet-mobile-top, 24px);
    height: auto;
    max-height: none;
    bottom: 0;
  }
}

.continue-popup.is-open .continue-popup-sheet {
  opacity: 1;
  transform: translateY(0) perspective(1200px) rotateX(0deg) scale(1);
}

/* Slim header */
.continue-popup-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.continue-popup-kicker {
  margin: 0 0 1px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}

.continue-popup-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
}

.continue-popup-close {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper-dim);
  color: var(--ink);
  cursor: pointer;
}

.continue-popup-close svg {
  width: 17px;
  height: 17px;
}

.continue-popup-close:hover,
.continue-popup-close:focus-visible {
  background: var(--input-fill);
}

.continue-popup-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 18px 40px;
}

.continue-popup-block {
  margin-bottom: 22px;
}

.continue-popup-block:last-child {
  margin-bottom: 0;
}

.continue-popup-subhead {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
}

.continue-popup-why {
  margin: -4px 0 12px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink);
}

/* Compact sign-in bar (guests) -- one line, no full-height prompt. */
.continue-popup-signin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m, 10px);
  background: var(--paper-dim);
}

.continue-popup-signin-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-deep);
}

.continue-popup-signin-icon svg {
  width: 19px;
  height: 19px;
}

.continue-popup-signin-text {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink);
}

.continue-popup-signin-text strong {
  color: var(--ink);
}

.continue-popup-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-m, 10px);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.continue-popup-cta:hover,
.continue-popup-cta:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Horizontal rails (last reads / just in) */
.continue-popup-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
  scroll-behavior: smooth;
}

/* 3D scroll hint */
.continue-popup-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%) translateZ(0);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(16,24,40,0.92));
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 2;
}
.continue-popup-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-50%) rotate(-45deg) translateZ(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease, transform 420ms cubic-bezier(0.25,0.8,0.25,1);
  z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.continue-popup-rail.has-scroll-hint::after,
.continue-popup-rail.has-scroll-hint::before {
  opacity: 1;
  animation: continue-rail-hint 1600ms ease-in-out infinite;
}
.continue-popup-rail.has-scroll-hint.scrolled::after,
.continue-popup-rail.has-scroll-hint.scrolled::before {
  opacity: 0;
  animation: none;
  transition: opacity 320ms ease;
}

@keyframes continue-rail-hint {
  0% { transform: translateY(-50%) translateX(0) rotate(-45deg) translateZ(0); }
  50% { transform: translateY(-50%) translateX(6px) rotate(-45deg) translateZ(10px); }
  100% { transform: translateY(-50%) translateX(0) rotate(-45deg) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
  .continue-popup-rail.has-scroll-hint::after,
  .continue-popup-rail.has-scroll-hint::before {
    animation: none;
  }
}

.continue-popup-rail-card {
  flex: 0 0 auto;
  width: 208px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  color: inherit;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m, 10px);
}

.continue-popup-rail-card:hover,
.continue-popup-rail-card:focus-visible {
  border-color: var(--amber-deep);
}

.continue-popup-rail-thumb {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--paper-dim);
}

.continue-popup-rail-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-popup-rail-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.continue-popup-rail-title {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.continue-popup-rail-meta {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Magazine grid: vertical thumbnail cards, with every seventh card promoted
   to a full-width horizontal banner. This is the "horizontal, vertical and
   mixed in one" rhythm, and it keeps applying to items loaded further down. */
.continue-popup-grid {
  display: grid;
}

.continue-popup-grid--feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.continue-popup-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m, 10px);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(14, 27, 44, 0.07));
}

.continue-popup-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-dim);
}

.continue-popup-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.continue-popup-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px 12px;
}

.continue-popup-tag {
  align-self: flex-start;
}

.continue-popup-card-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.continue-popup-card-title a {
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  line-height: inherit;
}

.continue-popup-card-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--amber-deep);
  text-underline-offset: 2px;
}

.continue-popup-card-meta {
  font-size: 0.72rem;
  color: var(--ink);
}

/* Full-width horizontal banner: image left, copy right. */
.continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}

.continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) .continue-popup-media {
  flex: 0 0 42%;
  aspect-ratio: auto;
  min-height: 126px;
}

.continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) .continue-popup-card-body {
  justify-content: center;
  padding: 12px 14px;
}

.continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) .continue-popup-card-title {
  font-size: 1rem;
}

/* Skeleton loaders */
.continue-popup-skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.continue-popup-skeleton[hidden] {
  display: none;
}

.continue-popup-card--skeleton {
  pointer-events: none;
}

.continue-popup-skeleton-media,
.continue-popup-skeleton-line {
  display: block;
  background: linear-gradient(100deg, var(--paper-dim) 20%, var(--line) 40%, var(--paper-dim) 60%);
  background-size: 200% 100%;
  animation: continue-shimmer 1.1s linear infinite;
}

.continue-popup-skeleton-media {
  aspect-ratio: 16 / 10;
}

.continue-popup-skeleton-body {
  padding: 10px 12px 12px;
}

.continue-popup-skeleton-line {
  width: 88%;
  height: 14px;
  margin: 8px 0 0;
  border-radius: 4px;
}

.continue-popup-skeleton-line--tag {
  width: 38%;
  height: 16px;
  margin: 0 0 6px;
  border-radius: 999px;
}

.continue-popup-skeleton-line--meta {
  width: 46%;
  height: 10px;
  margin-top: 8px;
  margin-bottom: 0;
}

.continue-popup-skeleton-line--short {
  width: 46%;
  height: 9px;
  margin-top: 8px;
  margin-bottom: 12px;
}

@keyframes continue-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.continue-popup-sentinel {
  height: 1px;
}

.continue-popup-end {
  margin: 0;
  padding: 16px 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink);
}

/* While the popup is open, the page behind cannot scroll. */
html.continue-popup-locked,
html.continue-popup-locked body {
  overflow: hidden;
}

/* Tablet and up: a centered placard a good deal wider than a phone -- it
   must fill well over half the viewport on a normal desktop (the old
   phone-width card felt too small) while the dimmed, blurred page stays
   visible all around it. The feed inside switches to three columns so the
   extra width becomes three magazine cards instead of two stretched ones.
   Phones keep the bottom sheet above. */
@media (min-width: 768px) {
  .continue-popup.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .continue-popup-sheet {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(980px, 92vw);
    max-height: min(800px, 90%);
    border-radius: 16px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  }

  /* Three columns so the wider placard stays a magazine rather than a
     stretched phone feed. The every-seventh full-width banner still spans
     the whole grid. */
  .continue-popup-grid--feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .continue-popup-skeleton {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phones: keep two columns with small thumbnails, tighten the chrome. */
@media (max-width: 700px) {
  .continue-popup-sheet {
    top: calc(100vh - var(--continue-sheet-mobile-height, 60vh));
    height: var(--continue-sheet-mobile-height, 60vh);
    max-height: var(--continue-sheet-mobile-height, 60vh);
    bottom: auto;
    border-radius: 14px 14px 0 0;
  }
  .continue-popup[data-continue-revert-full="1"] .continue-popup-sheet,
  .continue-popup.continue-popup--revert .continue-popup-sheet {
    top: 16px;
    height: auto;
    max-height: none;
    bottom: 0;
  }

  .continue-popup-head {
    padding: 10px 14px;
  }

  .continue-popup-title {
    font-size: 1rem;
  }

  .continue-popup-body {
    padding: 12px 12px 36px;
  }

  .continue-popup-grid--feed {
    gap: 10px;
  }

  .continue-popup-card-title {
    font-size: 0.84rem;
  }

  .continue-popup-card-body {
    padding: 8px 10px 10px;
  }

  .continue-popup-skeleton-body {
    padding: 8px 10px 10px;
  }

  .continue-popup-signin {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .continue-popup-signin-text {
    flex: 1 1 60%;
  }

  .continue-popup-rail-card {
    width: 176px;
  }
}

@media (max-width: 560px) {
  .continue-popup-sheet {
    top: calc(100vh - var(--continue-sheet-mobile-height, 60vh));
    height: var(--continue-sheet-mobile-height, 60vh);
    max-height: var(--continue-sheet-mobile-height, 60vh);
    bottom: auto;
  }
  .continue-popup[data-continue-revert-full="1"] .continue-popup-sheet,
  .continue-popup.continue-popup--revert .continue-popup-sheet {
    top: 12px;
    height: auto;
    max-height: none;
    bottom: 0;
  }
  .continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) .continue-popup-media {
    flex-basis: 38%;
    min-height: 104px;
  }

  .continue-popup-grid--feed > .continue-popup-card:nth-child(7n + 1) .continue-popup-card-title {
    font-size: 0.95rem;
  }
}