/* Flavor v3 — Niche Layouts (mobile-first, light mode) */

/* ─── HERO OVERLAY ─── */
.fl-hero-overlay{position:relative;display:flex;align-items:flex-end;border-radius:var(--fl-radius-lg);overflow:hidden;text-decoration:none;color:#fff}
.fl-hero-overlay__bg{position:absolute;inset:0}.fl-hero-overlay__bg img{width:100%;height:100%;object-fit:cover}
.fl-hero-overlay__gradient{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.2) 55%,transparent 100%)}
.fl-hero-overlay__content{position:relative;z-index:2;padding:var(--fl-sp-md);width:100%}
@media(min-width:768px){.fl-hero-overlay__content{padding:var(--fl-sp-xl)}}

/* ─── SCROLL ROW ─── */
.fl-scroll-row{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--fl-sp-xs)}
.fl-scroll-row::-webkit-scrollbar{display:none}

/* ─── TICKER / BREAKING ─── */
.fl-ticker{background:var(--fl-primary);color:#fff;font-size:var(--fl-fs-xs);font-weight:600;padding:var(--fl-sp-xs) 0;overflow:hidden;display:flex;align-items:center}
.fl-breaking{background:var(--fl-primary);color:#fff;font-size:var(--fl-fs-sm);font-weight:700;padding:var(--fl-sp-xs) var(--fl-gutter);display:flex;align-items:center;gap:var(--fl-sp-md)}
.fl-breaking__badge{background:rgba(0,0,0,.2);padding:.15em .6em;border-radius:3px;text-transform:uppercase;font-size:var(--fl-fs-xs);letter-spacing:.06em}

/* ─── NICHE HERO TITLES (proportional) ─── */
.fl-ntitle{font-size:clamp(1.25rem,1rem + 2vw,2.5rem);font-weight:800;line-height:1.12;color:#fff}
.fl-ntitle--serif{font-family:var(--fl-ff-serif);font-weight:700}
.fl-ntitle--upper{text-transform:uppercase;letter-spacing:-.01em}
.fl-ntitle--dark{color:var(--fl-text)}

/* ─── NICHE BADGES ─── */
.fl-nbadge{display:inline-block;padding:.18em .65em;font-size:var(--fl-fs-xs);font-weight:700;text-transform:uppercase;border-radius:3px;letter-spacing:.04em;line-height:1.4}
.fl-nbadge--primary{background:var(--fl-primary);color:#fff}
.fl-nbadge--green{background:#10b981;color:#fff}
.fl-nbadge--gold{background:linear-gradient(135deg,#c9a84c,#e2c975);color:#1a1a1a;border:1px solid #c9a84c}
.fl-nbadge--score{position:absolute;bottom:var(--fl-sp-xs);left:var(--fl-sp-xs);background:var(--fl-primary);color:#fff}

/* ─── NICHE BUTTONS ─── */
.fl-nbtn{display:inline-flex;align-items:center;gap:var(--fl-sp-2xs);padding:.5em 1.1em;font-size:var(--fl-fs-xs);font-weight:700;border-radius:var(--fl-radius);text-decoration:none;transition:all var(--fl-ease)}
.fl-nbtn--primary{background:var(--fl-primary);color:#fff}
.fl-nbtn--outline{background:transparent;border:1.5px solid var(--fl-primary);color:var(--fl-primary)}
.fl-nbtn--gold{background:linear-gradient(135deg,#c9a84c,#e2c975);color:#1a1a1a;border:1px solid #c9a84c}

/* ─── STARS ─── */
.fl-nstars{color:#f59e0b;font-size:var(--fl-fs-xs);letter-spacing:1px}

/* ─── SECTION LABEL ─── */
.fl-nlabel{font-size:var(--fl-fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--fl-sp-md)}
.fl-nlabel--center{text-align:center}
.fl-nlabel--primary{color:var(--fl-primary)}

/* ─── SMALL TEXT ─── */
.fl-nmeta{font-size:var(--fl-fs-xs);color:var(--fl-text-3)}
.fl-nexcerpt{font-size:var(--fl-fs-xs);color:var(--fl-text-2);line-height:1.45;margin-top:2px}

/* ═══════════════════════════════════════
   ALL NICHE GRIDS (mobile-first)
   ═══════════════════════════════════════ */

/* 2-col on desktop (hero + sidebar pattern) */
.fl-g-main-side{display:grid;gap:var(--fl-sp-lg);grid-template-columns:1fr}
@media(min-width:1024px){.fl-g-main-side{grid-template-columns:1fr 280px}}

/* 2-col equal on tablet+ */
.fl-g-2{display:grid;gap:var(--fl-sp-md);grid-template-columns:1fr}
@media(min-width:640px){.fl-g-2{grid-template-columns:1fr 1fr}}

/* 3-col on desktop */
.fl-g-3{display:grid;gap:var(--fl-sp-md);grid-template-columns:1fr}
@media(min-width:640px){.fl-g-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.fl-g-3{grid-template-columns:repeat(3,1fr)}}

/* 4-col on desktop */
.fl-g-4{display:grid;gap:var(--fl-sp-md);grid-template-columns:1fr 1fr}
@media(min-width:768px){.fl-g-4{grid-template-columns:repeat(4,1fr)}}

/* Hero featured (big + 2 small side) */
.fl-g-featured{display:grid;gap:var(--fl-gutter);grid-template-columns:1fr}
@media(min-width:768px){.fl-g-featured{grid-template-columns:1.6fr 1fr}}

/* Scoreboard 3-col */
.fl-g-scores{display:grid;gap:var(--fl-sp-md);grid-template-columns:1fr}
@media(min-width:768px){.fl-g-scores{grid-template-columns:1fr 1fr 1fr}}

/* ─── Fashion sidebar border ─── */
.fl-aside-bordered{border-top:1px solid var(--fl-border);padding-top:var(--fl-sp-lg);margin-top:var(--fl-sp-lg)}
@media(min-width:1024px){.fl-aside-bordered{border-top:none;padding-top:0;margin-top:0;border-left:1px solid var(--fl-border);padding-left:var(--fl-sp-lg)}}

/* ─── Sidebar Item (thumb + text) ─── */
.fl-side-item{display:flex;gap:var(--fl-sp-sm);text-decoration:none;color:inherit;padding:var(--fl-sp-xs) 0;border-bottom:1px solid var(--fl-border)}
.fl-side-item__img{width:48px;min-width:48px;height:48px;border-radius:var(--fl-radius);overflow:hidden;flex-shrink:0}
.fl-side-item__img img{width:100%;height:100%;object-fit:cover}
.fl-side-item__title{font-size:var(--fl-fs-xs);font-weight:700;line-height:1.3}

/* ─── Horizontal Card ─── */
.fl-hzcard{display:flex;gap:var(--fl-sp-sm);text-decoration:none;color:inherit;padding:var(--fl-sp-sm) 0;border-bottom:1px solid var(--fl-border)}
.fl-hzcard__img{width:90px;min-width:90px;aspect-ratio:4/3;border-radius:var(--fl-radius);overflow:hidden;flex-shrink:0}
@media(min-width:640px){.fl-hzcard__img{width:110px;min-width:110px}}
.fl-hzcard__img img{width:100%;height:100%;object-fit:cover}
.fl-hzcard__title{font-size:var(--fl-fs-sm);font-weight:700;line-height:1.3}

/* ─── Review Card (hz with stars) ─── */
.fl-revcard{display:flex;gap:var(--fl-sp-sm);text-decoration:none;color:inherit;background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--fl-radius-lg);overflow:hidden}
.fl-revcard__img{width:90px;min-width:90px;overflow:hidden;flex-shrink:0}
@media(min-width:640px){.fl-revcard__img{width:120px;min-width:120px}}
.fl-revcard__img img{width:100%;height:100%;object-fit:cover}
.fl-revcard__body{padding:var(--fl-sp-sm);display:flex;flex-direction:column;justify-content:center}

/* ─── Score Box ─── */
.fl-scorebox{background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--fl-radius-lg);padding:var(--fl-sp-md)}
.fl-scorebox__row{display:flex;align-items:center;justify-content:space-between;padding:var(--fl-sp-xs) 0;border-bottom:1px solid var(--fl-border);text-decoration:none;color:inherit;font-size:var(--fl-fs-sm)}
.fl-scorebox__val{font-weight:800;font-family:var(--fl-ff-mono);color:var(--fl-primary)}

/* ─── Poster Card (for anime/movies scroll) ─── */
.fl-nposter{display:block;min-width:110px;max-width:120px;flex-shrink:0;text-decoration:none;color:inherit}
@media(min-width:640px){.fl-nposter{min-width:130px;max-width:140px}}
.fl-nposter__img{aspect-ratio:3/4;width:100%;border-radius:var(--fl-radius);object-fit:cover;background:var(--fl-border)}
.fl-nposter__title{font-size:var(--fl-fs-xs);font-weight:700;margin-top:var(--fl-sp-2xs);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ─── Cuisine card (food) ─── */
.fl-cuisine__img{position:relative;border-radius:var(--fl-radius-lg);overflow:hidden;aspect-ratio:1/1}
.fl-cuisine__img img{width:100%;height:100%;object-fit:cover}
.fl-cuisine__flag{position:absolute;top:var(--fl-sp-xs);left:var(--fl-sp-xs);font-size:1.2rem}

/* ─── Civ overlay (mythology) ─── */
.fl-civcard{position:relative;aspect-ratio:16/10;border-radius:var(--fl-radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--fl-border)}
.fl-civcard__bg{position:absolute;inset:0}.fl-civcard__bg img{width:100%;height:100%;object-fit:cover}
.fl-civcard__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.fl-civcard__label{position:relative;z-index:2;font-size:var(--fl-fs-md);font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.06em}
@media(min-width:640px){.fl-civcard__label{font-size:var(--fl-fs-lg)}}

/* ─── God icon (mythology) ─── */
.fl-godicon{display:flex;flex-direction:column;align-items:center;gap:var(--fl-sp-2xs);text-decoration:none;color:inherit}
.fl-godicon__circle{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:1.5px solid var(--fl-border);border-radius:var(--fl-radius-lg);background:var(--fl-bg)}
@media(min-width:640px){.fl-godicon__circle{width:64px;height:64px;font-size:1.8rem}}
.fl-godicon__name{font-size:var(--fl-fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ─── Finance sparkline card ─── */
.fl-fincard{display:flex;flex-direction:column;background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--fl-radius-lg);overflow:hidden;text-decoration:none;color:inherit}
.fl-fincard__img{aspect-ratio:16/10;overflow:hidden}
.fl-fincard__img img{width:100%;height:100%;object-fit:cover}
.fl-fincard__body{padding:var(--fl-sp-xs) var(--fl-sp-sm)}
.fl-fincard__chart{display:flex;align-items:center;justify-content:space-between;padding:var(--fl-sp-2xs) var(--fl-sp-sm) var(--fl-sp-xs)}
.fl-fincard__spark{width:60px;height:24px}
.fl-fincard__pct{font-size:var(--fl-fs-xs);font-weight:800;white-space:nowrap}

/* ─── Health hero (left gradient) ─── */
.fl-healthhero{position:relative;min-height:clamp(160px,28vw,280px);display:flex;align-items:center;overflow:hidden}
.fl-healthhero__bg{position:absolute;inset:0}.fl-healthhero__bg img{width:100%;height:100%;object-fit:cover}
.fl-healthhero__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.4) 55%,transparent)}
.fl-healthhero__content{position:relative;z-index:2;padding:var(--fl-sp-lg) var(--fl-gutter);max-width:var(--fl-max-w);margin-inline:auto;width:100%}

/* ─── Health tip row ─── */
.fl-htip{display:flex;gap:var(--fl-sp-sm);padding:var(--fl-sp-xs) 0;border-bottom:1px solid var(--fl-border);font-size:var(--fl-fs-xs);line-height:1.5}
.fl-htip:last-child{border-bottom:none}
.fl-htip__icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}

/* ─── Health card with CTA ─── */
.fl-healthcard{display:flex;gap:var(--fl-sp-sm);background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--fl-radius-lg);overflow:hidden}
.fl-healthcard__img{width:100px;min-width:100px;overflow:hidden;flex-shrink:0}
@media(min-width:640px){.fl-healthcard__img{width:140px;min-width:140px}}
.fl-healthcard__img img{width:100%;height:100%;object-fit:cover}
.fl-healthcard__body{padding:var(--fl-sp-sm);display:flex;flex-direction:column;justify-content:center}

/* ─── Esports side card ─── */
.fl-eside{display:flex;gap:var(--fl-sp-sm);text-decoration:none;color:inherit;background:var(--fl-bg);border:1px solid var(--fl-border);border-radius:var(--fl-radius-lg);overflow:hidden}
.fl-eside__img{width:100px;min-width:100px;overflow:hidden;flex-shrink:0}
@media(min-width:640px){.fl-eside__img{width:140px;min-width:140px}}
.fl-eside__img img{width:100%;height:100%;object-fit:cover}
.fl-eside__body{padding:var(--fl-sp-sm);display:flex;flex-direction:column;justify-content:center}
.fl-eside__title{font-size:var(--fl-fs-sm);font-weight:800;line-height:1.25;text-transform:uppercase}

/* ─── Stock ticker scroll ─── */
.fl-stockbar{background:var(--fl-bg-alt);border-bottom:1px solid var(--fl-border);padding:var(--fl-sp-2xs) 0;overflow-x:auto;scrollbar-width:none;display:flex;white-space:nowrap;gap:0}
.fl-stockbar::-webkit-scrollbar{display:none}
.fl-stockbar__item{display:inline-flex;align-items:center;gap:var(--fl-sp-2xs);padding:0 var(--fl-sp-md);font-size:var(--fl-fs-xs);font-weight:600;border-right:1px solid var(--fl-border);flex-shrink:0}
.fl-stock--up{color:#16a34a;font-weight:700}
.fl-stock--down{color:#ef4444;font-weight:700}

/* ─── Fashion masthead ─── */
.fl-masthead{text-align:center;padding:var(--fl-sp-lg) var(--fl-gutter);border-bottom:1px solid var(--fl-border)}
.fl-masthead__headline{font-family:var(--fl-ff-serif);font-size:clamp(1.5rem,1rem + 2.5vw,3.5rem);font-weight:700;line-height:1.05;margin-top:var(--fl-sp-xs);max-width:700px;margin-inline:auto}

/* ─── Game review with score ─── */
.fl-grev{display:block;text-decoration:none;color:inherit}
.fl-grev__img{position:relative;border-radius:var(--fl-radius-lg);overflow:hidden;aspect-ratio:16/10}
.fl-grev__img img{width:100%;height:100%;object-fit:cover}
.fl-grev__title{font-size:var(--fl-fs-xs);font-weight:700;margin-top:var(--fl-sp-xs);text-transform:uppercase}

/* ─── Auto model list item ─── */
.fl-automodel{display:flex;align-items:center;gap:var(--fl-sp-sm);text-decoration:none;color:inherit;padding:var(--fl-sp-2xs) 0;border-bottom:1px solid var(--fl-border)}
.fl-automodel__img{width:48px;min-width:48px;height:32px;border-radius:var(--fl-radius);overflow:hidden}
.fl-automodel__img img{width:100%;height:100%;object-fit:cover}

/* ─── Launch card ─── */
.fl-launch{display:block;text-decoration:none;color:inherit}
.fl-launch__img{border-radius:var(--fl-radius-lg);overflow:hidden;aspect-ratio:16/10}
.fl-launch__img img{width:100%;height:100%;object-fit:cover}
.fl-launch__title{font-size:var(--fl-fs-sm);font-weight:700;margin-top:var(--fl-sp-xs)}
.fl-launch__price{font-size:var(--fl-fs-xs);color:var(--fl-text-2);font-weight:600}

/* ─── Guides link list ─── */
.fl-guidelink{display:block;padding:var(--fl-sp-xs) 0;border-bottom:1px solid var(--fl-border);font-size:var(--fl-fs-xs);font-weight:600;color:inherit;text-decoration:none}

/* ─── Niche section padding ─── */
.fl-nsection{padding:var(--fl-sp-lg) 0}
@media(min-width:768px){.fl-nsection{padding:var(--fl-sp-xl) 0}}

/* ─── Full-bleed hero (anime/myth/health) ─── */
.fl-fullhero{position:relative;min-height:clamp(200px,38vw,380px);display:flex;align-items:flex-end;overflow:hidden}
.fl-fullhero__bg{position:absolute;inset:0}.fl-fullhero__bg img{width:100%;height:100%;object-fit:cover}
.fl-fullhero__grad{position:absolute;inset:0;background:linear-gradient(0deg,var(--fl-bg) 0%,rgba(255,255,255,.3) 50%,transparent)}
.fl-fullhero__content{position:relative;z-index:2;padding:var(--fl-sp-md) var(--fl-gutter) var(--fl-sp-lg);max-width:var(--fl-max-w);margin-inline:auto;width:100%}
@media(min-width:768px){.fl-fullhero__content{padding:var(--fl-sp-lg) var(--fl-gutter) var(--fl-sp-2xl)}}

/* Myth hero center */
.fl-fullhero--center{align-items:center;justify-content:center;text-align:center}
.fl-fullhero--center .fl-fullhero__content{padding:var(--fl-sp-xl)}