/* ══════════════════════════════════════════════════════════════
   ePaper LANDING — Light & Clean theme
   Scoped to body.epaper-body:not(.ep-edition-open) so ONLY the editions
   selection page is light. The reader / PDF view (.ep-edition-open) keeps
   its original dark theme untouched. Loaded after epaper-viewer.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  --epl-bg:#faf8f3;        /* warm paper ground so white cards/ads stand out */
  --epl-surface:#ffffff;   /* pure white cards */
  --epl-ink:#1e1b16;       /* near-black text (warm bias) */
  --epl-ink-2:#413c34;
  --epl-muted:#7a736a;
  --epl-line:#ece7dd;
  --epl-line-2:#e2dcd0;
  --epl-red:#d9252a;       /* interactive accent ONLY */
}

/* ── Ground ── (both the body AND the .ep-main container carry the dark desk
   colour, so both must flip or the page stays dark behind light text) ── */
body.epaper-body:not(.ep-edition-open){
  background:var(--epl-bg);
  color:var(--epl-ink);
}
body.epaper-body:not(.ep-edition-open) .ep-main{
  background-color:var(--epl-bg);
  /* ambient premium wash (barely-there) + paper-inspired dot texture (~2%) */
  background-image:
    radial-gradient(circle at top right, rgba(229,57,53,.04), transparent 40%),
    radial-gradient(circle at bottom left, rgba(255,152,0,.03), transparent 45%),
    radial-gradient(rgba(60,40,20,.02) 1px, transparent 1px);
  background-size:auto, auto, 22px 22px;
  background-repeat:no-repeat, no-repeat, repeat;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing{
  color:var(--epl-ink);
}

/* Navbar stays DARK (same as the rest of the site); just a touch of depth. */
body.epaper-body .ep-nav{box-shadow:0 2px 12px rgba(0,0,0,.15);}

/* ── Landing header text → dark on light ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-kicker{color:var(--epl-red);}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-header h2{color:var(--epl-ink);}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-copy{color:var(--epl-muted);}

/* ── Filter chips → light; active = red (interactive accent) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn{
  background:var(--epl-surface);
  border-color:var(--epl-line-2);
  color:var(--epl-ink-2);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn:hover{
  background:var(--epl-surface);
  border-color:var(--epl-red);
  color:var(--epl-red);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn.active{
  background:var(--epl-red);
  border-color:var(--epl-red);
  color:#fff;
}

/* ── Sub-copy: sits directly under the heading, small + muted (not floating top-right) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-copy{
  max-width:56ch;
  margin-top:8px;
  font-size:16px;
  line-height:1.5;
  color:var(--epl-muted);
}

/* ── Info line under the filters ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-hint{
  margin:-6px 0 0;
  font-size:13px;
  color:var(--epl-muted);
}

/* ── Compact hero (tighter top section) — less top whitespace ── */
body.epaper-body:not(.ep-edition-open) .ep-main{padding-top:8px;}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-header{margin-bottom:10px;}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-kicker{font-size:13px;letter-spacing:2px;margin-bottom:6px;}
body.epaper-body:not(.ep-edition-open) .ep-edition-landing-header h2{
  font-size:clamp(30px,4.4vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-filter{margin-bottom:4px;}

/* ── Editions: narrower, centered container → premium & balanced ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-landing{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}
/* Hero → cards + wider gap between cards for breathing room */
body.epaper-body:not(.ep-edition-open) .ep-edition-grid{gap:46px;margin-top:26px;}

/* Card — layered soft shadow, subtle border, premium 250ms hover */
body.epaper-body:not(.ep-edition-open) .ep-edition-card{
  background:var(--epl-surface);
  border:1px solid #ececec;
  border-radius:21px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(24,27,32,.04), 0 12px 28px rgba(24,27,32,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:hover{
  transform:translateY(-5px);
  border-color:rgba(217,37,42,.30);
  box-shadow:0 2px 4px rgba(24,27,32,.06), 0 22px 46px rgba(24,27,32,.14);
}
/* Rounded thumbnail, inset from the card edges; gentle zoom on hover */
body.epaper-body:not(.ep-edition-open) .ep-edition-card-cover{
  border-radius:14px;overflow:hidden;margin:9px 9px 0;position:relative;cursor:zoom-in;
  border:1px solid rgba(24,27,32,.06);
  box-shadow:0 4px 12px rgba(24,27,32,.10);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card-preview,
body.epaper-body:not(.ep-edition-open) .ep-edition-card-preview-frame img{
  transition:transform .25s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:hover .ep-edition-card-preview,
body.epaper-body:not(.ep-edition-open) .ep-edition-card:hover .ep-edition-card-preview-frame img{
  transform:scale(1.02);
}
/* "Latest" badge on the newest edition */
body.epaper-body:not(.ep-edition-open) .ep-edition-latest{
  position:absolute;top:10px;left:10px;z-index:4;
  background:var(--epl-red);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  box-shadow:0 4px 12px rgba(217,37,42,.32);
}

/* ── Flip-page curl: top-right corner peels on hover (ePaper feel) ── */
body.epaper-body:not(.ep-edition-open) .ep-page-curl{
  position:absolute;top:0;right:0;z-index:3;pointer-events:none;width:0;height:0;
  background:linear-gradient(225deg, rgba(255,255,255,.96) 0%, #e7e7e7 46%, rgba(0,0,0,.10) 50%, transparent 52%);
  border-bottom-left-radius:7px;box-shadow:-3px 3px 6px rgba(0,0,0,.14);
  transition:width .28s ease, height .28s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:hover .ep-page-curl{width:40px;height:40px;}

/* ── Featured (newest) card: premium emphasis, NO resize (grid stays intact) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-card--featured{
  border-color:rgba(217,37,42,.32);
  box-shadow:0 2px 6px rgba(217,37,42,.08), 0 16px 38px rgba(24,27,32,.12);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card--featured:hover{
  box-shadow:0 2px 6px rgba(217,37,42,.14), 0 26px 54px rgba(24,27,32,.16);
}

/* ── Subtle press feedback (ripple-like) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn:active,
body.epaper-body:not(.ep-edition-open) .ep-load-more-btn:active{transform:scale(.97);}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:active{transform:translateY(-3px) scale(.995);}

/* ── Sticky language filters (stay accessible while scrolling) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-filter{
  position:sticky;top:0;z-index:20;
  background:var(--epl-bg);
  padding:10px 0;
  margin-bottom:6px;
}

/* ── Weekly-release context bar (all 3 languages treated equally) ── */
body.epaper-body:not(.ep-edition-open) .ep-weekly-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin:6px 0 0;padding:12px 16px;
  background:var(--epl-surface);border:1px solid var(--epl-line);border-radius:12px;
  box-shadow:0 4px 14px rgba(24,27,32,.05);
  animation:epFadeUp .5s ease both;
}
body.epaper-body:not(.ep-edition-open) .ep-weekly-tag{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--epl-red);
}
body.epaper-body:not(.ep-edition-open) .ep-weekly-main{font-size:13.5px;font-weight:700;color:var(--epl-ink);}
body.epaper-body:not(.ep-edition-open) .ep-weekly-langs{font-size:12.5px;color:var(--epl-muted);margin-left:auto;}

/* ── Timeline month divider (spans the full grid row) ── */
body.epaper-body:not(.ep-edition-open) .ep-month-header{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:16px;
  margin:18px 0 4px;
  font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--epl-muted);
}
body.epaper-body:not(.ep-edition-open) .ep-month-header::before,
body.epaper-body:not(.ep-edition-open) .ep-month-header::after{
  content:"";flex:1;height:1px;background:var(--epl-line);
}

/* ── Search editions box (lives in the sticky filter row) ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-search{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  background:var(--epl-surface);border:1px solid var(--epl-line-2);border-radius:999px;
  padding:7px 14px;color:var(--epl-muted);
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-search:focus-within{
  border-color:var(--epl-red);box-shadow:0 0 0 3px rgba(217,37,42,.10);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-search{
  padding:6px 13px;
  background:rgba(255,253,249,.88);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(24,27,32,.05);
}
/* Selected filter — brand red with a soft inner highlight (iOS-like depth) */
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn.active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(217,37,42,.26);
}
body.epaper-body:not(.ep-edition-open) .ep-edition-search input{
  border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--epl-ink);width:138px;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-search input::placeholder{color:var(--epl-muted);}
@media(max-width:640px){
  body.epaper-body:not(.ep-edition-open) .ep-edition-search{margin-left:0;width:100%;}
  body.epaper-body:not(.ep-edition-open) .ep-edition-search input{width:100%;}
}

/* ── Responsive: tighten gaps + let the grid use full width on smaller screens ── */
@media(max-width:1000px){
  body.epaper-body:not(.ep-edition-open) .ep-edition-landing{max-width:none;}
  body.epaper-body:not(.ep-edition-open) .ep-edition-grid{gap:22px;}
}
@media(max-width:700px){
  body.epaper-body:not(.ep-edition-open) .ep-edition-grid{gap:16px;}
  body.epaper-body:not(.ep-edition-open) .ep-weekly-langs{margin-left:0;width:100%;}
}

/* ── "Read Newspaper" — a proper button; fills brand red on card hover ── */
body.epaper-body:not(.ep-edition-open) .ep-read-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;padding:10px 12px;
  background:rgba(217,37,42,.06);
  border:1px solid rgba(217,37,42,.16);
  border-radius:10px;
  font-size:13px;font-weight:700;color:var(--epl-red);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:hover .ep-read-cta{
  background:var(--epl-red);border-color:var(--epl-red);color:#fff;
  box-shadow:0 8px 20px rgba(217,37,42,.18);
}

/* ── Advertisement fades in ── */
@keyframes epFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
body.epaper-body:not(.ep-edition-open) .vm-ad-slot.ep-ad-compact{animation:epFadeIn .6s ease both;}
@media (prefers-reduced-motion: reduce){
  body.epaper-body:not(.ep-edition-open) .ep-weekly-bar,
  body.epaper-body:not(.ep-edition-open) .vm-ad-slot.ep-ad-compact{animation:none;}
}
/* Taller card body (+~14px) */
body.epaper-body:not(.ep-edition-open) .ep-edition-card-body{
  display:flex;flex-direction:column;background:var(--epl-surface);padding:20px 18px 22px;
}
/* Footer: title (with newspaper icon) on top, date + language on one line */
body.epaper-body:not(.ep-edition-open) .ep-edition-card-title{margin-bottom:0;display:flex;align-items:center;}
body.epaper-body:not(.ep-edition-open) .ep-edition-card-metarow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-card-subtitle{
  margin-bottom:0;font-size:13px;display:inline-flex;align-items:center;color:var(--epl-muted);
}

/* ── Language badges: lighter fill, keep the 1px colour border, lighter weight ── */
/* Entrance: cards fade + slide up, staggered per row */
@keyframes epFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
body.epaper-body:not(.ep-edition-open) .ep-edition-card{animation:epFadeUp .5s ease both;}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:nth-child(3n+1){animation-delay:0ms;}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:nth-child(3n+2){animation-delay:100ms;}
body.epaper-body:not(.ep-edition-open) .ep-edition-card:nth-child(3n+3){animation-delay:200ms;}
@media (prefers-reduced-motion: reduce){
  body.epaper-body:not(.ep-edition-open) .ep-edition-card{animation:none;}
}

/* Language badges: globe icon + text, lighter fill/weight */
body.epaper-body:not(.ep-edition-open) .ep-edition-card-language{font-weight:600;letter-spacing:.6px;gap:5px;}
body.epaper-body:not(.ep-edition-open) .ep-edition-card[data-language="English"] .ep-edition-card-language,
body.epaper-body:not(.ep-edition-open) .ep-edition-card-language.ep-lang-english{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.22);}
body.epaper-body:not(.ep-edition-open) .ep-edition-card[data-language="Hindi"] .ep-edition-card-language,
body.epaper-body:not(.ep-edition-open) .ep-edition-card-language.ep-lang-hindi{background:rgba(234,88,12,.07);border-color:rgba(234,88,12,.22);}
body.epaper-body:not(.ep-edition-open) .ep-edition-card[data-language="Marathi"] .ep-edition-card-language,
body.epaper-body:not(.ep-edition-open) .ep-edition-card-language.ep-lang-marathi{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.22);}

/* ── Filters: hover scale + shadow ── */
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-edition-filter-btn:hover{
  transform:scale(1.04);
  box-shadow:0 6px 16px rgba(24,22,20,.10);
}

/* ── "Load more" → primary red pill; hover lifts + icon slides right ── */
body.epaper-body:not(.ep-edition-open) .ep-load-more-btn{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  width:auto;
  margin:14px auto 0;
  padding:12px 28px;
  background:var(--epl-red);
  border:1.5px solid var(--epl-red);
  border-radius:999px;
  color:#fff;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(217,37,42,.22);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.epaper-body:not(.ep-edition-open) .ep-load-more-btn svg{transition:transform .2s ease;}
body.epaper-body:not(.ep-edition-open) .ep-load-more-btn:hover{
  background:#c0171e;
  box-shadow:0 12px 28px rgba(217,37,42,.32);
  transform:translateY(-2px);
}
body.epaper-body:not(.ep-edition-open) .ep-load-more-btn:hover svg{transform:translateX(3px);}

/* ── Consistent floating buttons: Latest News, AI, WhatsApp ── */
body.epaper-body .ep-news-sidebar-reopen,
body.epaper-body .vm-chat-launcher,
body.epaper-body .ep-whatsapp-btn{
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Give the Latest-News tab the same rounded, soft-shadow language as the rest */
body.epaper-body .ep-news-sidebar-reopen{
  border-radius:12px;
  box-shadow:0 6px 18px rgba(24,27,32,.12);
}
body.epaper-body .ep-news-sidebar-reopen:hover,
body.epaper-body .vm-chat-launcher:hover,
body.epaper-body .ep-whatsapp-btn:hover{
  transform:scale(1.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* ── Latest-news sidebar → light ── */
body.epaper-body:not(.ep-edition-open) .ep-news-sidebar-header{
  background:var(--epl-bg);
  border-bottom-color:var(--epl-red);
}
body.epaper-body:not(.ep-edition-open) .ep-news-sidebar-header span{color:var(--epl-ink);}
body.epaper-body:not(.ep-edition-open) .ep-news-card{border-bottom-color:var(--epl-line);}
body.epaper-body:not(.ep-edition-open) .ep-news-card:hover{background:#eef0f3;}
body.epaper-body:not(.ep-edition-open) .ep-news-card-title{color:var(--epl-ink);}
body.epaper-body:not(.ep-edition-open) .ep-news-card-thumb{background:#e9ecf1;}
body.epaper-body:not(.ep-edition-open) .ep-news-sidebar-more{color:var(--epl-red);}

/* ── Compact ad card sits cleanly on the light ground (Load More → Ad 56px) ── */
body.epaper-body:not(.ep-edition-open) .vm-ad-slot.ep-ad-compact{
  margin-top:56px;
  max-width:820px;   /* ~75% of the content width — a visual break, not full-width */
  border-color:var(--epl-line-2);
  box-shadow:0 8px 24px rgba(24,27,32,.08);
  transition:box-shadow .25s ease;
}
body.epaper-body:not(.ep-edition-open) .vm-ad-slot.ep-ad-compact:hover{
  box-shadow:0 14px 34px rgba(24,27,32,.12);
}