/* MOLO (DIRECTION.md §3.3): the terrace in morning light, held whole; wide calm rows; DM Sans only.
   Loaded after group.css, which carries the header, sheet, hero frame and board, menu block, events and footer.
   The brand is light sage, so it is spent on grounds only: ink reads on it, and ink is the accent on white. */

:root {
  --brand: #c1d5bf;
  --brand-lift: hsl(114 21% 87%);
  --on-brand: var(--ink);
  --accent: var(--ink);
  --hairline-on-brand: rgba(16, 32, 27, .22);
  --font-read: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-read);
  --font-write: var(--font-read);
  --display-weight: 500;
  --heading-weight: 500;
  --label-weight: 500;
  --button-weight: 500;
  --facts-weight: 500;
  --board: #c1d5bf;
  --on-board: #10201b;
}

body { font-size: 1rem; }


/* ---------- header: the profilovka lockup's ink on the header's own sage ---------- */
.sg-head__svg { display: block; height: 100%; width: auto; }

/* ---------- the object at that place (operator, 6 Nov): MOLO's flat counter board ---------- */
.card-molo { --hero-object-padding: 1.25rem; background: var(--board); color: var(--on-board); }
.card-molo__top { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.card-molo__badge { display: block; flex: none; width: 5.5rem; }
.card-molo__badge svg { display: block; width: 100%; height: auto; }  /* the wordmark at the old badge width, its own 182:57.8 ratio */
.card-molo__label { font: 500 .75rem/1.2 var(--font-read); letter-spacing: .1em; text-transform: uppercase; }
.card-molo__title { margin-top: .375rem; font: 500 1.5rem/1.15 var(--font-read); }
.card-molo__section + .card-molo__section { margin-top: .5rem; }
.card-molo__items { list-style: none; padding: 0; margin-top: .25rem; }
.card-molo__item { display: flex; gap: .75rem; justify-content: space-between; padding-block: .1875rem; border-bottom: 1px solid rgba(16, 32, 27, .15); font: 400 1rem/1.25 var(--font-read); }
.card-molo__item > :first-child { min-width: 0; overflow-wrap: anywhere; }
.card-molo .sg-menu__allergens { --menu-muted: rgba(16, 32, 27, .7); --menu-desc-style: normal; white-space: nowrap; }
.card-molo__price { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-molo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: .75rem; }
.card-molo__stamp { font: 400 .8125rem/1.4 var(--font-read); }
.card-molo__foot > a { margin-left: auto; }
.card-molo__note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: .5rem; color: var(--on-board); font: 400 .8125rem/1.4 var(--font-read); }
.card-molo__link { display: inline-flex; align-items: center; min-height: 2.75rem; font: 500 .9375rem/1.4 var(--font-read); }
.card-molo__message { font: 400 1rem/1.4 var(--font-read); }
.card-molo__message + .card-molo__link { margin-top: .75rem; }

/* ---------- photographs: the cups, kiosk and equipment in their own proportions ---------- */
.molo-photo, .molo-tile { min-width: 0; min-height: 0; }
:is(.molo-photo, .molo-tile) img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; }
.molo-split__photo img { aspect-ratio: 3 / 2; object-position: 50% 72%; }
.molo-story__photo img { aspect-ratio: 4 / 3; object-position: 50% 50%; }

.molo-title, #mlynek-title { font-size: 2.125rem; font-weight: 500; line-height: 1.08; }
.molo-title { margin-bottom: 1.5rem; }
.sg-section.molo-pult { padding-block: 3.5rem 4rem; }
.sg-section.molo-story { padding-block: 0 4rem; }
main:not(:has(#pult)) .molo-story { padding-top: clamp(3.5rem, 6.67vw, 6rem); }
.sg-section.molo-program { padding-top: 4rem; }

/* ---------- Na pultu: a readable menu beside a dessert detail ---------- */
.molo-split { row-gap: var(--row-gap); }
.molo-menu { --menu-weight: 500; --menu-desc-style: normal; max-width: var(--measure); }
.molo-menu .sg-menu__stamp + .sg-menu__section { margin-top: 2rem; }
.molo-menu .sg-menu__note { margin-top: 2rem; color: var(--ink-60); }
.molo-menu .sg-menu__line { margin: 0; }
.molo-menu .sg-menu__name, .molo-menu .sg-menu__price { font-size: 1rem; line-height: 1.4; }
.molo-menu .sg-menu__items { gap: .75rem; }
.molo-menu .sg-menu__desc { font-size: .875rem; line-height: 1.45; }
/* phones: the description runs under the price column too (the price sits on the name's line above it) */
@media (max-width: 47.999rem) { .molo-menu .sg-menu__desc { grid-column: 1 / -1; } }

/* ---------- Molo Caffè: lead + two paragraphs cols 1–6, the kiosk cols 8–12 beside the lead ---------- */
.molo-story__photo { margin-top: var(--row-gap); }
.molo-story__lead { font-size: 1.3125rem; line-height: 1.45; max-width: 38ch; }
.molo-story__body .sg-body { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.6; }

@media (min-width: 48rem) {
  .card-molo { --hero-object-padding: 1.5rem; }
  .card-molo__badge { width: 6rem; }
  .card-molo__title { font-size: 1.75rem; }
  .molo-title, #mlynek-title { font-size: 2.75rem; }
  .molo-title { margin-bottom: 2rem; }
  .sg-section.molo-pult { padding-block: 4.5rem 5rem; }
  .sg-section.molo-story { padding-block: 0 5rem; }
  .sg-section.molo-program { padding-top: 5rem; }
  .molo-menu .sg-menu__name, .molo-menu .sg-menu__price { font-size: 1.125rem; }
  .molo-menu .sg-menu__items { gap: 1rem; }
  .molo-split__photo { grid-row: 1; }
  .molo-split__photo img { aspect-ratio: 4 / 3; object-position: 50% 74%; }
  .molo-split:has([data-counter]:not([data-state="ready"])) .molo-split__photo img { aspect-ratio: 3 / 2; }
  .molo-story__grid { grid-template-rows: auto auto auto 1fr; }
  .molo-story__photo { grid-row: 2 / 5; margin-top: 0; align-self: start; }
  .molo-story__lead { font-size: 1.5rem; line-height: 1.4; }
}

/* ---------- Na mlýnku: the chalkboard's two coffees, then board · grinders · machine ---------- */
.sg-section.molo-mlynek { background: var(--board); color: var(--on-board); padding: 3rem 0 3.5rem; }
.molo-mlynek__label { font-size: .8125rem; line-height: 1.4; letter-spacing: .06em; margin: 1rem 0 1.5rem; }
.molo-mlynek__tiles { row-gap: var(--grid-gap); }
.molo-tile { grid-column: span 6; }
.molo-tile--machine { grid-column: 1 / -1; }
.molo-tile--machine img { aspect-ratio: 3 / 2; }
@media (min-width: 48rem) {
  .sg-section.molo-mlynek { padding: 3.5rem 0 4rem; }
  .molo-tile, .molo-tile--machine { grid-column: span 4; }
  .molo-tile--machine img { aspect-ratio: 4 / 5; object-position: 45% 50%; }
}

@media (min-width: 64rem) {
  .card-molo { --hero-object-padding: 1.75rem; }
  .card-molo__top { gap: 1.5rem; margin-bottom: 1rem; }
  .card-molo__badge { width: 7rem; }
  .card-molo__title { font-size: 2rem; }
  .card-molo__item { font-size: 1.125rem; line-height: 1.3; padding-block: .25rem; }
  .card-molo__foot { margin-top: 1rem; }
  .molo-title, #mlynek-title { font-size: 3.5rem; }
  .sg-section.molo-pult { padding-block: 6rem; }
  .sg-section.molo-story { padding-block: 0 6rem; }
  .sg-section.molo-program { padding-top: 6rem; }
  .molo-menu .sg-menu__desc { font-size: .9375rem; }
  .molo-split__text { grid-column: 1 / 6; }
  .molo-split__photo { grid-column: 7 / 13; }
  .molo-story__lead { font-size: 1.625rem; }
  .sg-section.molo-mlynek { padding: 4rem 0 5rem; }
  .molo-tile { grid-column: span 3; }
  .molo-tile--machine { grid-column: span 6; }
  .molo-tile--machine img { aspect-ratio: 5 / 3; object-position: 45% 50%; }
}

/* Keep the complete counter board within the short-laptop object budget. */
@media (min-width: 64rem) and (max-height: 800px) {
  .card-molo { --hero-object-padding: 1.25rem; }
  .card-molo__badge { width: 6rem; }
  .card-molo__top { gap: 1rem; margin-bottom: .75rem; }
  .card-molo__title { font-size: 1.75rem; }
  .card-molo__item { font-size: 1rem; line-height: 1.25; padding-block: .1875rem; }
  .card-molo__foot { margin-top: .75rem; }
}

/* MOLO prints no veg marker: its record flags coffee (art director, review 2). */
.molo-menu .sg-menu__veg { display: none; }