/* TMK Hero — direct translation of components/hero/Hero.jsx. Three variants, one component:
   --full-bleed (default: photo, ink protection gradient, left-aligned content over the image),
   --contained (cream stage, centered, for an illustration cluster rather than a photo),
   --minimal (title-only, for utility/hub pages). CTA markup reuses css/components/cta.css. */

.tmk-hero__eyebrow{font-size:var(--text-caption);font-weight:var(--weight-structure-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.tmk-hero__badge{display:inline-block;padding:5px 14px;border-radius:var(--radius-pill);background:var(--color-accent-concept);color:var(--tatami-50);font-size:var(--text-caption);font-weight:var(--weight-structure-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* --minimal */
.tmk-hero--minimal{padding-block:var(--space-8) var(--space-6);padding-inline:var(--body-inset);text-align:center}
.tmk-hero--minimal .tmk-hero__eyebrow{color:var(--color-accent-concept-on-light);margin-bottom:var(--space-3);display:block}
.tmk-hero--minimal h1{font-size:var(--text-h1);line-height:var(--leading-h1)}
.tmk-hero--minimal p{margin:var(--space-3) auto 0;max-width:560px;color:var(--color-text-secondary)}

/* --contained */
.tmk-hero--contained{padding-block:var(--space-7);padding-inline:var(--body-inset);text-align:center;display:grid;justify-items:center;gap:var(--space-5)}
.tmk-hero--contained img.tmk-hero__media{max-width:min(760px, 92%);margin:0 auto}
.tmk-hero--contained .tmk-hero__meta{display:flex;gap:var(--space-3);align-items:center;color:var(--color-accent-concept-on-light)}
.tmk-hero--contained h1{max-width:720px;margin:0}
.tmk-hero--contained p{margin:0;max-width:560px;color:var(--color-text-secondary);font-size:var(--text-lead);line-height:var(--leading-lead);font-family:var(--font-structure);font-weight:var(--weight-structure)}

/* --full-bleed (default) */
.tmk-hero--full-bleed{position:relative;min-height:min(72vh, 640px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.tmk-hero--full-bleed img.tmk-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tmk-hero--full-bleed .tmk-hero__scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(20,14,8,0.72) 0%, rgba(20,14,8,0.15) 55%, rgba(20,14,8,0.25) 100%)}
/* No --container-wide cap on the content box (client review round 4, §6). It used to centre a
   1280px box inside the row, which put the hero's own left edge at 112px at a 1440 viewport
   (80px of centring slack + the 32px gutter) while every other row on the same page sat at 32.
   The Location template had already been given a scoped `max-width:none` override for exactly
   this reason in review round 3; measured across all 12 routes, that left ONE component
   behaving two different ways - Location heroes at 32, Menu / Storie / Città / La nostra storia
   heroes at 112. The override is now the rule. Text measure is untouched: h1 keeps its 800px
   cap and the standfirst its 540px, so only the axis moves, never the line length. */
.tmk-hero--full-bleed .tmk-hero__content{position:relative;width:100%;padding-block:var(--space-8);padding-inline:var(--body-inset);color:var(--tatami-50);display:grid;gap:var(--space-4);justify-items:start}
.tmk-hero--full-bleed .tmk-hero__meta{display:flex;gap:var(--space-3);align-items:center}
.tmk-hero--full-bleed .tmk-hero__meta .tmk-hero__eyebrow{color:var(--tatami-200)}
.tmk-hero--full-bleed h1{margin:0;color:var(--tatami-50);max-width:800px}
.tmk-hero--full-bleed p{margin:0;max-width:540px;color:var(--tatami-200);font-size:var(--text-lead);line-height:var(--leading-lead)}
.tmk-hero--full-bleed .tmk-hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2);flex-wrap:wrap}
.tmk-hero--full-bleed .tmk-hero__actions .tmk-cta--secondary{border-color:var(--tatami-50);color:var(--tatami-50)}

/* HISTORY, so the removal is not re-litigated: review round 3 added a `.single-location`-scoped
   `max-width:none; margin:0` here, because the generic rule's centred --container-wide box put
   the Location hero right of the breadcrumb below it. Review round 4 measured the same
   divergence on every OTHER route carrying this component and promoted that override into the
   base rule above, so the scoped copy is gone rather than left as dead weight. The 32px
   left/right the override also asserted is now simply the base rule's own --space-6, matched to
   tmkloc_col's 32px padding control (_BUILD/152) and to every other row on the site. */

/* PAGE GRID (client review "chiusura progetto", task 1). The three variants above used to inset
   their content by a flat --space-6/--space-5, which is edge-to-edge minus a fixed gutter: the
   hero content had NO horizontal cap at all. Measured at a 1900px viewport that put the Location
   hero's headline at x=32 while the breadcrumb immediately below it - an Elementor BOXED row
   capped at the kit's 1440 container_width - sat at x=230. The photo must still bleed to both
   edges, so the fix is padding-only: --page-inset (tokens/layout.css) resolves to
   max(32px, (100% - 1440px)/2), which is the identical arithmetic a boxed row performs. Below
   ~1504px it is literally the same 32px this component already had, so nothing changes at the
   breakpoints the site was tuned at; above it, the hero finally shares the page's axis.
   The text measures (h1 800px, standfirst 540px) are untouched - only the axis moved. */