/*
 * KTZ Meats — HOME (resources/views/meats/home.blade.php). Loaded after home.css, whose counter rail and section heads
 * it shares. Colours come from the meats token block (body[data-company="meats"]); every value is a --s-* token.
 */

/* ---- #top: the butcher-red field, the name, and the price ticket hanging beside it -------------------------- */
.cf-mhero {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    align-items: center; padding: var(--s-space-section) var(--s-gutter-wide);
    background: var(--s-field); color: var(--s-on-field);
}
.cf-mhero__words { grid-column: 1 / span 7; display: grid; gap: var(--s-space-s); justify-items: start; }
.cf-mhero:not(.cf-mhero--ticket) .cf-mhero__words { grid-column: 1 / span 9; }
.cf-mhero .cf-label--ink { color: var(--s-on-field); }
.cf-mhero__title { max-width: var(--s-measure-display); color: var(--s-on-field); }
.cf-mhero__lede { max-width: var(--s-measure-lede); color: var(--s-on-field-muted); }
.cf-mhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-s) var(--s-space-m); margin-top: var(--s-space-xs); }
.cf-mhero__more { color: var(--s-on-field); }

/* THE PRICE TICKET: a kraft swing tag on its twine, a real cut's weights and prices like a counter label. */
.cf-meats-ticket {
    grid-column: 9 / -1; justify-self: end; width: 100%; max-width: var(--s-measure-card);
    display: grid; gap: var(--s-space-2xs); text-decoration: none;
    transform-origin: 50% var(--s-tag-hole-inset-lg); transition: transform var(--s-dur-swing) var(--s-ease-swing);
}
@media (hover: hover) { .cf-meats-ticket:hover { transform: rotate(var(--s-swing)); } }
.cf-meats-ticket:focus-visible { transform: rotate(var(--s-swing)); outline: var(--s-focus-w, 3px) solid var(--s-on-field); outline-offset: var(--s-space-3xs); }
.cf-meats-ticket__kind { font-size: var(--s-size-tag); font-weight: var(--s-w-tag); letter-spacing: var(--s-track-tag); text-transform: uppercase; }
.cf-meats-ticket__name { margin: 0; }
.cf-meats-ticket__rows { display: grid; margin-block: var(--s-space-xs); border-top: var(--s-rule-w) solid var(--s-rule); }
.cf-meats-ticket__row {
    display: flex; justify-content: space-between; gap: var(--s-space-s); padding-block: var(--s-space-2xs);
    border-bottom: var(--s-rule-w) solid var(--s-rule); font-variant-numeric: tabular-nums;
}
.cf-meats-ticket__price { font-weight: var(--s-w-display); }
.cf-meats-ticket__go { justify-self: start; color: var(--s-madder); font-weight: var(--s-w-tag); text-decoration: underline; text-underline-offset: var(--s-space-3xs); }

/* ---- #ways: packs, or by the kg -------------------------------------------------------------------------- */
.cf-mways { padding: var(--s-space-section) var(--s-gutter-wide) 0; }
.cf-mways__title { margin: 0 0 var(--s-space-m); }
.cf-mways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid-gap); margin: 0; padding: 0; list-style: none; }
.cf-mways__way { display: grid; gap: var(--s-space-xs); align-content: start; }
.cf-mways__way .cf-h3, .cf-mways__way .cf-body { margin: 0; }

/* ---- #cuts: each category on its own tag, hanging from one string ----------------------------------------- */
.cf-mcuts { padding: var(--s-space-section) var(--s-gutter-wide) 0; }
.cf-mcuts__list {
    display: flex; flex-wrap: wrap; gap: var(--s-space-m); margin: 0; padding: calc(var(--s-twine-len) + var(--s-space-xs)) 0 0;
    list-style: none; border-top: var(--s-twine-w) solid var(--s-twine);
}
.cf-mcuts__tag { min-width: var(--s-qty-w); }
.cf-mcuts__name { font-weight: var(--s-w-display); font-size: var(--s-size-h3); line-height: 1.1; }
.cf-mcuts__count { color: var(--s-madder); font-size: var(--s-size-tag); font-weight: var(--s-w-tag); letter-spacing: var(--s-track-tag); text-transform: uppercase; }

/* ---- #how: four steps on the red field ------------------------------------------------------------------- */
.cf-mhow { margin-top: var(--s-space-section); padding: var(--s-space-section) var(--s-gutter-wide); background: var(--s-field); color: var(--s-on-field); }
.cf-mhow .cf-h2, .cf-mhow .cf-h3 { color: var(--s-on-field); }
.cf-mhow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid-gap); margin: var(--s-space-m) 0 0; padding: 0; list-style: none; }
.cf-mhow__step { display: grid; gap: var(--s-space-2xs); align-content: start; }
.cf-mhow__step .cf-h3, .cf-mhow__step .cf-body { margin: 0; }
.cf-mhow__step .cf-body { color: var(--s-on-field-muted); }
.cf-mhow__n { font-size: var(--s-size-step-n); font-weight: var(--s-w-display); line-height: 1; color: var(--s-field-accent); }

@media (max-width: 63.99rem) {
    .cf-mhero { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-space-xl); padding: var(--s-space-xl) var(--s-gutter); }
    .cf-meats-ticket { justify-self: auto; align-self: center; max-width: none; }
    .cf-mways, .cf-mcuts { padding-inline: var(--s-gutter); }
    .cf-mways__grid { grid-template-columns: minmax(0, 1fr); }
    .cf-mhow { padding: var(--s-space-xl) var(--s-gutter); }
    .cf-mhow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 29.99rem) {
    .cf-mhow__steps { grid-template-columns: minmax(0, 1fr); }
}