/* ════════════════════════════════════════════════════════════
   BYTES YATRA — MAGAZINE HOMEPAGE
   Loaded on the front page only (see by_scripts in functions.php)
   ════════════════════════════════════════════════════════════ */

/* Homepage uses the same sans-serif as the navbar (DM Sans) */
.by-homepage--mag {
  --by-heading-font: var(--by-body-font);
  font-family: var(--by-body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No sidebar ads → content uses the full width */
.by-home-layout--full { grid-template-columns:minmax(0,1fr) !important; }

.by-homepage--mag .by-home-content > * + * { margin-top:2.25rem; }
.by-homepage--mag .by-home-content > .sr-only + * { margin-top:0; } /* hidden H1 adds no gap */
.by-homepage--mag .by-home-content > .by-mag-ad + *,
.by-homepage--mag .by-home-content > * + .by-mag-ad { margin-top:1.5rem; }
.by-mag-ad { line-height:0; }

/* ── Section heading ─────────────────────────────────────────── */
.by-mag-head {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--by-border);
  position:relative;
}
.by-mag-head::after {
  content:''; position:absolute; left:0; bottom:-1px;
  width:48px; height:3px; border-radius:3px;
  background:var(--by-primary);
}
.by-mag-head__title {
  font-family:var(--by-heading-font);
  font-size:1.35rem; font-weight:700; line-height:1.15; letter-spacing:-.01em;
  display:flex; align-items:center; gap:.55rem;
}
.by-mag-head__title i { color:var(--by-primary); font-size:1rem; }
.by-mag-head__more {
  flex-shrink:0;
  font-size:.95rem; font-weight:600;
  color:var(--by-primary);
}
.by-mag-head__more i { font-size:.7rem; transition:transform var(--by-transition); }
.by-mag-head__more:hover i { transform:translateX(3px); }

/* ── Image placeholder: same plain light style as category pages ── */
.by-mag-ph {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
}
.by-mag-ph span {
  color:#bbb; font-weight:600;
  font-size:.85rem; text-transform:uppercase;
  letter-spacing:1px;
}

/* ── Cards ────────────────────────────────────────────────────── */
.by-mag-card { position:relative; min-width:0; }
.by-mag-card__img {
  display:block; position:relative; overflow:hidden;
  border-radius:var(--by-radius);
  aspect-ratio:16/9;
  background:var(--by-surface2);
}
.by-mag-card__img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.by-mag-card:hover .by-mag-card__img img { transform:scale(1.04); }
.by-mag-card__title { font-family:var(--by-heading-font); font-weight:700; line-height:1.3; color:var(--by-text); }
.by-mag-card__title a:hover { color:var(--by-primary); }
.by-mag-card__excerpt { font-size:1.02rem; color:var(--by-text-muted); line-height:1.5; }

/* card: image on top */
.by-mag-card--card .by-mag-card__body { padding-top:.65rem; display:flex; flex-direction:column; gap:.3rem; }
.by-mag-card--card .by-mag-card__title { font-size:1.02rem; }

/* row: small image left */
.by-mag-card--row { display:flex; gap:.85rem; align-items:center; }
.by-mag-card--row .by-mag-card__img { flex:0 0 112px; border-radius:8px; }
.by-mag-card--row .by-mag-card__img .by-mag-ph span { display:none; }
.by-mag-card--row .by-mag-card__body { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.by-mag-card--row .by-mag-card__title { font-family:var(--by-body-font); font-size:.95rem; font-weight:600; line-height:1.35; }

/* overlay + lead: title over image */
.by-mag-card--overlay .by-mag-card__img,
.by-mag-card--lead .by-mag-card__img { aspect-ratio:4/3; }
.by-mag-card--lead .by-mag-card__img { aspect-ratio:16/9; border-radius:var(--by-radius-lg); }
.by-mag-card--overlay .by-mag-card__img::after,
.by-mag-card--lead .by-mag-card__img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,16,35,.88) 0%, rgba(10,16,35,.35) 45%, transparent 75%);
  pointer-events:none;
}
.by-mag-card--overlay .by-mag-card__body,
.by-mag-card--lead .by-mag-card__body {
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:.4rem;
  pointer-events:none;
}
.by-mag-card--overlay .by-mag-card__body a,
.by-mag-card--lead .by-mag-card__body a { pointer-events:auto; }
.by-mag-card--overlay .by-mag-card__title,
.by-mag-card--lead .by-mag-card__title { color:#fff; }
.by-mag-card--overlay .by-mag-card__title a:hover,
.by-mag-card--lead .by-mag-card__title a:hover { color:#fff; text-decoration:underline; }
.by-mag-card--overlay .by-mag-card__title { font-size:1.1rem; }
.by-mag-card--lead .by-mag-card__title { font-size:clamp(1.35rem, 2.4vw, 1.85rem); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
.by-mag-card--lead .by-mag-card__excerpt { color:rgba(255,255,255,.85); max-width:640px; }
/* overlay/lead without a featured image: no dark shade, dark text */
.by-mag-card--noimg.by-mag-card--overlay .by-mag-card__img::after,
.by-mag-card--noimg.by-mag-card--lead .by-mag-card__img::after { display:none; }
.by-mag-card--noimg.by-mag-card--overlay .by-mag-card__img,
.by-mag-card--noimg.by-mag-card--lead .by-mag-card__img { border:1px solid var(--by-border); }
.by-mag-card--noimg.by-mag-card--overlay .by-mag-ph,
.by-mag-card--noimg.by-mag-card--lead .by-mag-ph { align-items:flex-start; padding-top:1.2rem; }
.by-mag-card--noimg.by-mag-card--overlay .by-mag-card__title,
.by-mag-card--noimg.by-mag-card--overlay .by-mag-card__title a:hover,
.by-mag-card--noimg.by-mag-card--lead .by-mag-card__title,
.by-mag-card--noimg.by-mag-card--lead .by-mag-card__title a:hover { color:var(--by-text); }
.by-mag-card--noimg.by-mag-card--lead .by-mag-card__excerpt { color:var(--by-text-muted); }

/* Card Info Badges on homepage cards (not on the top story) */
.by-mag-card--lead .by-card__info-row { display:none; }
.by-mag-card .by-card__info-row { margin-top:.2rem; padding-top:.5rem; }
.by-mag-card--row .by-card__info-row { margin-top:.1rem; padding-top:.35rem; }
.by-mag-card--lead .by-card__info-row,
.by-mag-card--overlay .by-card__info-row { border-top-color:rgba(255,255,255,.25); max-width:640px; }
.by-mag-card--lead .by-card__info-badge,
.by-mag-card--overlay .by-card__info-badge { color:rgba(255,255,255,.9); font-size:.85rem; }
.by-mag-card--lead .by-card__info-badge i,
.by-mag-card--overlay .by-card__info-badge i { color:#fff; opacity:.85; }
.by-mag-card--noimg.by-mag-card--lead .by-card__info-badge,
.by-mag-card--noimg.by-mag-card--overlay .by-card__info-badge { color:var(--by-text-muted); }
.by-mag-card--noimg.by-mag-card--lead .by-card__info-badge i,
.by-mag-card--noimg.by-mag-card--overlay .by-card__info-badge i { color:var(--by-primary); }
.by-mag-card--noimg.by-mag-card--lead .by-card__info-row,
.by-mag-card--noimg.by-mag-card--overlay .by-card__info-row { border-top-color:var(--by-border); }

/* ── Grids ────────────────────────────────────────────────────── */
.by-mag-grid { display:grid; gap:1.25rem; }
.by-mag-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.by-mag-grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.by-mag-grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }

.by-mag-list { display:flex; flex-direction:column; }
.by-mag-list > .by-mag-card { padding:.75rem 0; border-top:1px solid var(--by-border); }
.by-mag-list > .by-mag-card:first-child { padding-top:0; border-top:0; }

/* ── Hero ─────────────────────────────────────────────────────── */
.by-mag-hero {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:1.5rem;
}
.by-mag-hero__subs {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem;
  margin-top:1.1rem;
}
.by-mag-hero__subs .by-mag-card__title { font-size:.98rem; }
.by-mag-hero__latest {
  background:var(--by-surface);
  border:1px solid var(--by-border);
  border-radius:var(--by-radius-lg);
  padding:1.1rem 1.1rem .4rem;
  align-self:start;
}
.by-mag-hero__latest .by-mag-card--row .by-mag-card__img { flex-basis:96px; }

/* Side-by-side layout: the Latest box is exactly as tall as the lead-story column
   (height:0 + min-height:100% = it never makes the row taller), so no empty space
   appears under the lead story on narrow desktops / "Desktop site" on phones.
   Items that don't fit are hidden whole by fitHeroLatest() in front-page.php. */
@media (min-width:901px) {
  .by-mag-hero__latest {
    align-self:stretch;
    height:0; min-height:100%;
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  .by-mag-hero__latest .by-mag-list { min-height:0; }
  .by-mag-hero__latest .by-mag-card.is-overflow { display:none; }
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.by-mag-tabs {
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none;
  margin-bottom:1.1rem; padding-bottom:2px;
}
.by-mag-tabs::-webkit-scrollbar { display:none; }
.by-mag-tabs button {
  flex-shrink:0;
  padding:.4rem 1rem;
  border-radius:var(--by-radius-full);
  border:1px solid var(--by-border);
  background:var(--by-surface);
  font-size:.98rem; font-weight:500; color:var(--by-text-muted);
  transition:all var(--by-transition);
}
.by-mag-tabs button:hover { border-color:var(--by-primary); color:var(--by-primary); }
.by-mag-tabs button.is-active { background:var(--by-primary); border-color:var(--by-primary); color:#fff; }
.by-mag-tabs button:focus-visible { outline:2px solid var(--by-primary); outline-offset:2px; }
.by-mag-tabpanel[hidden] { display:none; }

/* ── Education: quick links + spotlight ──────────────────────── */
.by-mag-quick {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.75rem;
  margin-bottom:1.25rem;
}
.by-mag-quick a {
  display:flex; flex-direction:column; gap:.15rem;
  padding:.85rem 1rem;
  background:var(--by-surface);
  border:1px solid var(--by-border);
  border-left:3px solid var(--by-primary);
  border-radius:8px;
  transition:box-shadow var(--by-transition), transform var(--by-transition);
}
.by-mag-quick a:hover { box-shadow:var(--by-shadow); transform:translateY(-2px); }
.by-mag-quick strong { font-size:1.08rem; font-weight:600; color:var(--by-text); }
.by-mag-quick span { font-size:.9rem; color:var(--by-text-muted); }

.by-mag-spot {
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.5rem;
}
.by-mag-spot > .by-mag-card--card .by-mag-card__title { font-size:1.3rem; font-weight:700; line-height:1.2; }

/* ── Carousel ─────────────────────────────────────────────────── */
.by-mag-carousel__nav { display:flex; align-items:center; gap:.4rem; }
.by-mag-carousel__nav button {
  width:2rem; height:2rem; border-radius:50%;
  border:1px solid var(--by-border); background:var(--by-surface);
  color:var(--by-text-muted); font-size:.75rem;
  transition:all var(--by-transition);
}
.by-mag-carousel__nav button:hover { background:var(--by-primary); border-color:var(--by-primary); color:#fff; }
.by-mag-carousel__nav .by-mag-head__more { margin-left:.4rem; }
.by-mag-carousel__track {
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 1.25rem) / 4);
  gap:1.25rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:.25rem;
}
.by-mag-carousel__track::-webkit-scrollbar { display:none; }
.by-mag-carousel__track > * { scroll-snap-align:start; }

/* ── Tech + Finance ───────────────────────────────────────────── */
.by-mag-duo { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2rem; }
.by-mag-duo > .by-mag-section {
  background:var(--by-surface);
  border:1px solid var(--by-border);
  border-radius:var(--by-radius-lg);
  padding:1.1rem 1.2rem .5rem;
}

/* ── Explore topics ───────────────────────────────────────────── */
.by-mag-topics { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem; }
.by-mag-topic {
  background:var(--by-surface);
  border:1px solid var(--by-border);
  border-radius:var(--by-radius);
  padding:1rem 1.1rem;
}
.by-mag-topic__name {
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--by-heading-font); font-weight:700; font-size:1.2rem;
  margin-bottom:.6rem;
}
.by-mag-topic__name i {
  width:2rem; height:2rem; border-radius:8px;
  background:rgba(17,24,39,.06); color:var(--by-primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:.85rem;
}
.by-mag-topic__name:hover { color:var(--by-primary); }
.by-mag-topic__subs { display:flex; flex-wrap:wrap; gap:.35rem; }
.by-mag-topic__subs a {
  font-size:.9rem; padding:.15rem .65rem;
  border-radius:var(--by-radius-full);
  background:var(--by-surface2); color:var(--by-text-muted);
}
.by-mag-topic__subs a:hover { background:var(--by-primary); color:#fff; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:1100px) {
  .by-mag-grid--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .by-mag-carousel__track { grid-auto-columns:calc((100% - 2 * 1.25rem) / 3); }
}
@media (max-width:900px) {
  .by-mag-hero { grid-template-columns:1fr; }
  .by-mag-spot { grid-template-columns:1fr; }
  .by-mag-duo { grid-template-columns:1fr; gap:1.5rem; }
  .by-mag-topics { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .by-homepage--mag .by-home-content > * + * { margin-top:1.75rem; }
  .by-mag-head__title { font-size:1.2rem; }
  .by-mag-hero__subs { grid-template-columns:1fr; gap:0; }
  .by-mag-hero__subs > .by-mag-card { display:flex; align-items:center; gap:.85rem; padding:.75rem 0; border-top:1px solid var(--by-border); }
  .by-mag-hero__subs > .by-mag-card .by-mag-card__img { flex:0 0 112px; border-radius:8px; }
  .by-mag-hero__subs > .by-mag-card .by-mag-card__body { padding-top:0; justify-content:center; }
  .by-mag-hero__subs .by-mag-ph span { display:none; }
  .by-mag-card--lead .by-mag-card__img { aspect-ratio:4/3; }
  .by-mag-card--lead .by-mag-card__excerpt { display:none; }
  .by-mag-grid--3 { grid-template-columns:1fr; }
  .by-mag-card--overlay .by-mag-card__img { aspect-ratio:16/9; }
  .by-mag-grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; }
  .by-mag-grid--4 { gap:.9rem; }
  .by-mag-grid--2 .by-mag-card__title,
  .by-mag-grid--4 .by-mag-card__title { font-size:.95rem; }
  .by-mag-carousel__track { grid-auto-columns:72%; gap:.9rem; }
  .by-mag-carousel__nav button { display:none; }
  .by-mag-topics { grid-template-columns:1fr; }
  .by-mag-quick { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ── Gap above the footer: one 24px space (was 64px desktop / 52px phone) ── */
.by-homepage--mag .by-home-layout { padding-bottom:1.5rem !important; }
body.home .by-footer { margin-top:0; }