/* ============================================================================
   flavors.css - the flavour card system.
   Each card declares --flavor-color, --on and --on-inv inline. Everything
   inside derives from those three so contrast holds automatically.
   ========================================================================== */

/* ---- COOKIE ART ---------------------------------------------------------- */
/* Used for the SVG placeholder only. Real photography uses .fl__photo. */
.ck{overflow:visible}
.ck .ck-shadow{fill:#16100C;opacity:.13}
.ck .ck-rim{fill:color-mix(in srgb, var(--flavor-color) 72%, #16100C)}
.ck .ck-base{fill:color-mix(in srgb, var(--flavor-color) 46%, #FFFFFF)}
.ck .ck-frost{fill:color-mix(in srgb, var(--flavor-color) 14%, #FFFFFF)}
.ck .ck-frost-edge{fill:color-mix(in srgb, var(--flavor-color) 40%, #FFFFFF)}
.ck .ck-chip{fill:color-mix(in srgb, var(--flavor-color) 46%, #16100C)}
.ck .ck-chip-hi{fill:color-mix(in srgb, var(--flavor-color) 62%, #16100C)}
.ck .ck-crumb{fill:color-mix(in srgb, var(--flavor-color) 60%, #FFFFFF)}

/* ---- WEEK HEAD ----------------------------------------------------------- */
.week-head{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-6);padding-block:var(--space-8) var(--space-10)}
.week-head h2{font-size:var(--text-title);margin-top:var(--space-3)}
.week-head__note{margin-left:auto;color:var(--color-ink-soft);font-size:var(--text-sm);max-width:34ch;text-align:right}

/* ---- THE CARD ------------------------------------------------------------ */
.week-rows{display:flex;flex-direction:column;gap:var(--space-5)}
.fl{
  background:var(--color-bg);
  border:1px solid var(--color-line);
  border-radius:var(--radius-xl);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s,background-color .3s;
}
.fl__in{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(36px,4.4vw,60px) clamp(28px,4vw,64px)}
.fl--rev .fl__in{grid-template-columns:1.14fr .86fr}
.fl--rev .fl__fig{order:2}

.fl__fig{position:relative;display:grid;place-items:center}
.fl__fig::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;opacity:.5;
  background:radial-gradient(circle, color-mix(in srgb, var(--flavor-color) 34%, #fff), transparent 68%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.fl__art{position:relative;width:min(330px,82%);
  filter:drop-shadow(0 10px 14px rgba(22,16,12,.14));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .45s ease}
/* real photography slot: same box as the SVG so nothing shifts */
.fl__photo{position:relative;width:min(330px,82%);aspect-ratio:1/1;object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(22,16,12,.14));
  transition:transform .45s cubic-bezier(.22,.61,.36,1),filter .45s ease}

.fl__badges{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.fl__meta{font-size:var(--text-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint)}
.fl__name{font-family:var(--font-body);font-weight:800;font-size:var(--text-flavor);letter-spacing:var(--track-flavor);line-height:1;margin-top:var(--space-6)}
.fl__name a{text-decoration:none}
.fl__line{margin-top:var(--space-5);font-size:var(--text-lg);color:var(--color-ink-soft);max-width:52ch}
.fl__facts{display:flex;flex-wrap:wrap;row-gap:var(--space-5);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-line)}
.fact{padding-inline:var(--space-6);border-left:1px solid var(--color-line)}
.fact:first-child{padding-left:0;border-left:none}
.fact__l{font-size:10px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-faint)}
.fact__v{font-weight:700;letter-spacing:-.01em;margin-top:6px;font-size:var(--text-lg)}
.fact__v .stars{font-size:var(--text-base)}
.fact__c{color:var(--color-ink-faint);font-weight:600}
.fl__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* ---- THE FILL -----------------------------------------------------------
   On hover the card fills with the flavour at FULL strength. Every text and
   line value derives from --on through the alpha ladder in tokens.css.
   ------------------------------------------------------------------------ */
.fl:hover,.fl:focus-within{
  transform:translateY(-4px);
  background-color:var(--flavor-color);
  border-color:transparent;
  box-shadow:0 6px 14px rgba(22,16,12,.08),
             0 20px 40px color-mix(in srgb, var(--flavor-color) 45%, transparent),
             0 40px 76px rgba(22,16,12,.10);
}
.fl:hover .fl__name,.fl:focus-within .fl__name,
.fl:hover .fact__v,.fl:focus-within .fact__v{color:var(--on)}
.fl:hover .fl__line,.fl:focus-within .fl__line{
  color:color-mix(in srgb, var(--on) var(--on-a-body), transparent)}
.fl:hover .fl__meta,.fl:focus-within .fl__meta,
.fl:hover .fact__l,.fl:focus-within .fact__l,
.fl:hover .fact__c,.fl:focus-within .fact__c{
  color:color-mix(in srgb, var(--on) var(--on-a-label), transparent)}
.fl:hover .fl__facts,.fl:focus-within .fl__facts,
.fl:hover .fact,.fl:focus-within .fact{
  border-color:color-mix(in srgb, var(--on) var(--on-a-hairline), transparent)}
.fl:hover .stars,.fl:focus-within .stars{color:var(--on)}
.fl:hover .stars .e,.fl:focus-within .stars .e{
  color:color-mix(in srgb, var(--on) var(--on-a-hairline), transparent)}
.fl:hover .btn--primary,.fl:focus-within .btn--primary{background:var(--on);color:var(--on-inv)}
.fl:hover .btn--ghost,.fl:focus-within .btn--ghost{
  border-color:color-mix(in srgb, var(--on) var(--on-a-border), transparent);color:var(--on)}
.fl:active{transform:translateY(-1px)}

.fl:hover .fl__art,.fl:focus-within .fl__art,
.fl:hover .fl__photo,.fl:focus-within .fl__photo{
  transform:scale(1.09) rotate(-3deg) translateY(-8px);
  filter:drop-shadow(0 24px 28px rgba(22,16,12,.26))}
.fl:hover .fl__fig::before,.fl:focus-within .fl__fig::before{transform:scale(1.2);opacity:0}

/* ---- COVER STAR (homepage hero right) ------------------------------------ */
.cover{position:relative;border:1px solid var(--color-line);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);background:var(--color-bg-tint)}
.cover__tag{position:absolute;top:var(--space-6);left:var(--space-6);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink-soft)}
.cover__ck{width:min(268px,72%);margin:var(--space-10) auto var(--space-6)}
.cover__name{font-weight:800;letter-spacing:-.03em;font-size:var(--text-2xl);text-align:center}
.cover__row{display:flex;justify-content:center;align-items:center;gap:var(--space-3);margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-ink-soft)}

/* ---- FLAVOR ARCHIVE GRID (Pillar 3) -------------------------------------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5);margin-top:var(--space-8)}
.fcard{border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-6);text-decoration:none;display:block;text-align:center;transition:background-color .25s,border-color .25s,transform .25s}
.fcard__art{width:min(140px,70%);margin-inline:auto}
.fcard__name{font-weight:800;letter-spacing:-.02em;margin-top:var(--space-4);font-size:var(--text-base)}
.fcard__meta{font-size:var(--text-xs);color:var(--color-ink-faint);margin-top:4px}
.fcard:hover{background-color:var(--flavor-color);border-color:transparent;transform:translateY(-3px)}
.fcard:hover .fcard__name{color:var(--on)}
.fcard:hover .fcard__meta{color:color-mix(in srgb, var(--on) var(--on-a-label), transparent)}

/* ---- TABLET -------------------------------------------------------------- */
@media (max-width:1020px){
  .week-head__note{margin-left:0;text-align:left}
}

/* ---- MOBILE: the fill is the permanent resting state (locked rule) ------- */
@media (max-width:859px){
  .week-rows{gap:var(--space-4)}
  .fl{border-radius:var(--radius-lg);background-color:var(--flavor-color);border-color:transparent}
  .fl .fl__name,.fl .fact__v{color:var(--on)}
  .fl .fl__line{color:color-mix(in srgb, var(--on) var(--on-a-body), transparent)}
  .fl .fl__meta,.fl .fact__l,.fl .fact__c{color:color-mix(in srgb, var(--on) var(--on-a-label), transparent)}
  .fl .fl__facts,.fl .fact{border-color:color-mix(in srgb, var(--on) var(--on-a-hairline), transparent)}
  .fl .stars{color:var(--on)}
  .fl .stars .e{color:color-mix(in srgb, var(--on) var(--on-a-hairline), transparent)}
  .fl .btn--primary{background:var(--on);color:var(--on-inv)}
  .fl .btn--ghost{border-color:color-mix(in srgb, var(--on) var(--on-a-border), transparent);color:var(--on)}
  .fl__fig::before{opacity:0}
  .fl:hover,.fl:focus-within{transform:none;box-shadow:none}
  .fl:hover .fl__art,.fl:focus-within .fl__art,
  .fl:hover .fl__photo,.fl:focus-within .fl__photo{transform:none;filter:drop-shadow(0 10px 14px rgba(22,16,12,.14))}
  .fl:active{transform:scale(.995)}

  .fl__in{grid-template-columns:1fr!important;gap:0;padding:var(--space-8) var(--space-6) var(--space-6)}
  .fl--rev .fl__fig{order:0}
  .fl__fig{padding-bottom:var(--space-6)}
  .fl__art,.fl__photo{width:min(200px,54vw)}
  .fl__name{font-size:clamp(1.75rem,7.2vw,2.5rem);margin-top:var(--space-5)}
  .fl__line{font-size:var(--text-base);margin-top:var(--space-4)}
  .fl__facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) 0;margin-top:var(--space-6);padding-top:var(--space-5)}
  .fact{padding-inline:0;border-left:none}
  .fact:nth-child(even){padding-left:var(--space-5);border-left:1px solid}
  .fact:last-child{grid-column:1 / -1;padding-left:0;border-left:none;border-top:1px solid;padding-top:var(--space-5)}
  .fl__actions{flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}
  .fl__actions .btn{width:100%;min-height:52px;padding-block:0}
}
@media (max-width:400px){
  .fl__facts{grid-template-columns:1fr}
  .fact:nth-child(even){padding-left:0;border-left:none}
}