/* ==========================================================================
   More Matcha — Menu / Drinky (https://www.morematcha.cz/menu/)
   Upload to: /user/documents/more-matcha/menu/menu.css   (Header field: ?v=1)

   Loaded site-wide from the Shoptet HEAD field, so EVERY rule is scoped to
   #more-matcha-menu (or :has(#more-matcha-menu) for the Shoptet page helpers
   at the bottom). Nothing here touches the homepage, Kontakt or Pobočky.

   Design tokens: same values as the homepage (more-matcha.css). They are
   repeated here only because the homepage tokens live on #more-matcha-home.
   ========================================================================== */

/* Brand fonts — same files + family names as the homepage 2.0 CSS.
   Declaring them again is harmless (the browser downloads each file once)
   and keeps this page working even before the homepage 2.0 CSS is live. */
@font-face {
  font-family: "MM Ayr Modern";
  src: url("/user/documents/more-matcha/fonts/mm-ayr-modern-bold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MM Caligane";
  /* demo cut: no Czech accents → basic Latin only; use for "matcha" only */
  src: url("/user/documents/more-matcha/fonts/mm-caligane.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}


/* --------------------------------------------------------------------------
   0. Tokens + wrapper base
   -------------------------------------------------------------------------- */
#more-matcha-menu {
  --mm-ink: #1C1C1E;
  --mm-ink-2: #3A3A3C;
  --mm-ink-3: #5B5B60;           /* small meta text, 6.3:1 on off-white */
  --mm-sage: #718A6E;
  --mm-sage-strong: #5E765B;     /* brand sage, deepened: #FFF on it = 4.98:1 (AA) */
  --mm-sage-light: #BED0BB;
  --mm-sage-deep: #3E4C3C;
  --mm-paper: #F4F6F4;
  --mm-offwhite: #F8F6F2;        /* warm off-white from the brand manual — page surface */
  --mm-panel: #E6E0DB;           /* studio wall of the drink photos (shown while loading) */
  --mm-deep: #1F2B12;
  --mm-matcha: #557F27;
  --mm-line: rgba(28, 28, 30, 0.14);
  --mm-line-strong: rgba(28, 28, 30, 0.8);

  --mm-font-display: "MM Ayr Modern", "Ayr Modern", "Archivo", "Arial Black", system-ui, sans-serif;
  --mm-font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-script: "MM Caligane", "Brush Script MT", cursive;

  --mm-gutter: clamp(16px, 4vw, 64px);
  --mm-max: 1600px;
  --mm-radius: clamp(14px, 1.4vw, 22px);
  --mm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --mm-menu-sticky-top: 0px;     /* menu.js sets this to the fixed Shoptet header height */

  position: relative;
  display: block;
  max-width: var(--mm-max);
  margin: 0 auto;
  background: var(--mm-offwhite);
  /* paint the surface edge to edge without widening the page (no horizontal scroll) */
  box-shadow: 0 0 0 100vmax var(--mm-offwhite);
  clip-path: inset(0 -100vmax);
  color: var(--mm-ink);
  font-family: var(--mm-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

#more-matcha-menu,
#more-matcha-menu *,
#more-matcha-menu *::before,
#more-matcha-menu *::after {
  box-sizing: border-box;
}

#more-matcha-menu :where(h1, h2, h3, p, ul, dl, dd, figure) {
  margin: 0;
}

#more-matcha-menu :where(ul) {
  padding: 0;
  list-style: none;
}

/* Shoptet styles headings globally — reset them inside our block */
#more-matcha-menu :where(h1, h2, h3) {
  color: inherit;
  text-align: left;                  /* Shoptet centres h1 globally */
  text-transform: none;
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: -0.01em;
  word-spacing: 0.14em;              /* Ayr Modern's space is very narrow */
  hyphens: manual;
  overflow-wrap: break-word;
}

#more-matcha-menu :focus-visible {
  outline: 2px solid var(--mm-ink);
  outline-offset: 3px;
}

#more-matcha-menu img {
  display: block;
  max-width: 100%;
}

#more-matcha-menu .mm-menu-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#more-matcha-menu .mm-menu-eyebrow {
  font: 500 12px/1.3 var(--mm-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-sage-deep);
}

#more-matcha-menu .mm-menu-script {
  font-family: var(--mm-font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--mm-matcha);
}


/* --------------------------------------------------------------------------
   1. INTRO — typographic, editorial
   -------------------------------------------------------------------------- */
#more-matcha-menu .mm-menu-intro {
  display: grid;
  gap: 20px;
  padding: clamp(40px, 7vw, 120px) 0 clamp(36px, 5vw, 72px);
}

#more-matcha-menu .mm-menu-intro__title {
  font-size: clamp(44px, 6.9vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

#more-matcha-menu .mm-menu-intro__line {
  display: block;
}

#more-matcha-menu .mm-menu-intro__title .mm-menu-script {
  display: inline-block;
  font-size: 1.12em;
  line-height: 0.7;
  margin-right: 0.04em;
  transform: translateY(0.05em) rotate(-3deg);
}

#more-matcha-menu .mm-menu-intro__side {
  display: grid;
  gap: 24px;
  max-width: 440px;
}

#more-matcha-menu .mm-menu-intro__lead {
  font-size: clamp(17px, 16px + 0.3vw, 20px);
  line-height: 1.5;
  color: var(--mm-ink-2);
  text-wrap: pretty;
}

#more-matcha-menu .mm-menu-intro__facts {
  display: grid;
  gap: 0;
  font-size: 14px;
  line-height: 1.45;
}

#more-matcha-menu .mm-menu-intro__facts > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--mm-line);
}

#more-matcha-menu .mm-menu-intro__label {
  color: var(--mm-ink-3);
}


@media (min-width: 900px) {
  #more-matcha-menu .mm-menu-intro {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: end;
    column-gap: clamp(40px, 6vw, 120px);
  }
  #more-matcha-menu .mm-menu-intro .mm-menu-eyebrow { grid-column: 1 / -1; }
  #more-matcha-menu .mm-menu-intro__side { padding-bottom: 0.4em; }
}


/* --------------------------------------------------------------------------
   2. CATEGORY FILTER — sticky chip row
   -------------------------------------------------------------------------- */
#more-matcha-menu .mm-menu-filter {
  position: sticky;
  top: var(--mm-menu-sticky-top);
  z-index: 20;
  background: var(--mm-offwhite);
  /* full-width surface + (once stuck) a 1px hairline underneath — both are shadows,
     so nothing ever widens the page */
  box-shadow: 0 0 0 100vmax var(--mm-offwhite), 0 1px 0 100vmax transparent;
  clip-path: inset(0 -100vmax -1px);
  transition: box-shadow 0.3s ease;
}

#more-matcha-menu .mm-menu-filter[hidden] {
  display: none;
}

#more-matcha-menu .mm-menu-filter.mm-is-stuck {
  box-shadow: 0 0 0 100vmax var(--mm-offwhite), 0 1px 0 100vmax var(--mm-line);
}

#more-matcha-menu .mm-menu-filter__track {
  display: flex;
  gap: 8px;
  padding: 14px 0;
}

#more-matcha-menu .mm-menu-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid rgba(28, 28, 30, 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-ink);
  font: 500 13px/1 var(--mm-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s var(--mm-ease-out), border-color 0.3s var(--mm-ease-out), color 0.3s var(--mm-ease-out), transform 0.16s ease-out;
}

#more-matcha-menu .mm-menu-chip__count {
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

#more-matcha-menu .mm-menu-chip__count:empty {
  display: none;
}

#more-matcha-menu .mm-menu-chip[aria-pressed="true"] {
  border-color: var(--mm-sage-strong);
  background: var(--mm-sage-strong);
  color: #FFFFFF;
}

#more-matcha-menu .mm-menu-chip[aria-pressed="true"] .mm-menu-chip__count {
  opacity: 0.8;
}

#more-matcha-menu .mm-menu-chip:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-menu .mm-menu-chip[aria-pressed="false"]:hover {
    border-color: var(--mm-sage-strong);
    color: var(--mm-sage-deep);
  }
}

/* Phones/tablets: one swipeable row, bleeding to the screen edges */
@media (max-width: 899px) {
  #more-matcha-menu .mm-menu-filter__track {
    margin: 0 calc(var(--mm-gutter) * -1);
    padding-left: var(--mm-gutter);
    padding-right: var(--mm-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--mm-gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  #more-matcha-menu .mm-menu-filter__track::-webkit-scrollbar {
    display: none;
  }
  /* spacer so the last chip can scroll clear of the fade */
  #more-matcha-menu .mm-menu-filter__track::after {
    content: "";
    flex: none;
    width: 8px;
  }
}

@media (min-width: 900px) {
  #more-matcha-menu .mm-menu-filter__track {
    justify-content: center;
    padding: 18px 0;
  }
}


/* --------------------------------------------------------------------------
   3. CATEGORY SECTIONS + DRINK CARDS
   -------------------------------------------------------------------------- */
#more-matcha-menu .mm-menu-list {
  padding-bottom: clamp(72px, 9vw, 144px);
}

#more-matcha-menu .mm-menu-cat {
  padding-top: clamp(40px, 6vw, 104px);
  /* anchor jumps land below the sticky filter */
  scroll-margin-top: calc(var(--mm-menu-sticky-top) + 72px);
}

#more-matcha-menu .mm-menu-cat[hidden] {
  display: none;
}

/* Section head: printed-menu rule line, number, title, one line of copy */
#more-matcha-menu .mm-menu-cat__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mm-line-strong);
}

#more-matcha-menu .mm-menu-cat__num {
  font: 500 13px/1 var(--mm-font-body);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--mm-sage-strong);
}

#more-matcha-menu .mm-menu-cat__title {
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: 1;
}

#more-matcha-menu .mm-menu-cat__text {
  grid-column: 2;
  font-size: 15px;
  color: var(--mm-ink-2);
}

@media (min-width: 900px) {
  #more-matcha-menu .mm-menu-cat__head {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 360px);
    align-items: end;
    padding-top: 20px;
  }
  #more-matcha-menu .mm-menu-cat__num { align-self: start; padding-top: 6px; }
  #more-matcha-menu .mm-menu-cat__text {
    grid-column: 3;
    padding-bottom: 6px;
    text-align: right;
  }
}

/* --- grid ---
   phones  (< 600): editorial list rows (photo left, text right)
   tablet  (600–1023): 2 per row
   desktop (≥ 1024): 3 per row */
#more-matcha-menu .mm-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 20px;
}

#more-matcha-menu .mm-menu-drink {
  position: relative;
  min-width: 0;
}

#more-matcha-menu .mm-menu-drink__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius);
  background: var(--mm-panel);
  transform: translateZ(0);            /* keeps the rounded clip crisp while the image scales */
}

#more-matcha-menu .mm-menu-drink__media picture,
#more-matcha-menu .mm-menu-drink__media img {
  display: block;
  width: 100%;
  height: 100%;
}

#more-matcha-menu .mm-menu-drink__media img {
  object-fit: cover;
  object-position: 50% 50%;            /* each photo is already cropped around its cup */
  transition: transform 0.9s var(--mm-ease-out);
}

/* Drink names: Lexend SemiBold (readable at card size); Ayr Modern stays for headlines + category titles */
#more-matcha-menu .mm-menu-drink__name {
  font-family: var(--mm-font-body);
  font-weight: 600;
  font-size: clamp(18px, 15px + 0.3vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-spacing: normal;
  text-wrap: balance;
}

#more-matcha-menu .mm-menu-drink__desc {
  margin-top: 8px;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mm-ink-2);
  text-wrap: pretty;
}

@media (max-width: 599px) {
  #more-matcha-menu .mm-menu-drink {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px 0;
  }
  #more-matcha-menu .mm-menu-drink + .mm-menu-drink {
    border-top: 1px solid var(--mm-line);
  }
  #more-matcha-menu .mm-menu-drink__media {
    border-radius: 12px;
  }
  #more-matcha-menu .mm-menu-drink__name {
    font-size: 18px;
  }
  #more-matcha-menu .mm-menu-drink__desc {
    margin-top: 6px;
    font-size: 14px;
  }
}

@media (min-width: 600px) {
  #more-matcha-menu .mm-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px);
    margin-top: clamp(28px, 3vw, 48px);
  }
  #more-matcha-menu .mm-menu-drink__body {
    padding-top: 20px;
  }
}

/* The grid adapts to how many drinks a category has, so no row ends with a lone card:
   3 → 3 in a row · 4 → 4 in a row (2 × 2 on tablets) · 5 → 2 large + 3 (editorial) ·
   anything else → 3 per row. Works automatically when drinks are added or removed. */
@media (min-width: 600px) {
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 2) {
    grid-column: span 3;
  }
}

@media (min-width: 1024px) {
  #more-matcha-menu .mm-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* the two large cards of a 5-drink category: square panel, so the wider card doesn't crop the cup */
@media (min-width: 600px) {
  #more-matcha-menu .mm-menu-grid:has(> :nth-child(5):last-child) > :nth-child(-n + 2) .mm-menu-drink__media {
    aspect-ratio: 1 / 1;
  }
}

/* Hover (desktop mouse only): the panel lifts a little, the photo breathes, the name gets a hairline */
#more-matcha-menu .mm-menu-drink__name {
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  #more-matcha-menu .mm-menu-drink__media {
    transition: transform 0.6s var(--mm-ease-out);
  }
  #more-matcha-menu .mm-menu-drink:hover .mm-menu-drink__name {
    text-decoration-color: currentColor;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  #more-matcha-menu .mm-menu-drink:hover .mm-menu-drink__media {
    transform: translateY(-4px);
  }
  #more-matcha-menu .mm-menu-drink:hover .mm-menu-drink__media img {
    transform: scale(1.03);
  }
}


/* --------------------------------------------------------------------------
   4. OUTRO — deep green band: milk types + where to taste
   -------------------------------------------------------------------------- */
#more-matcha-menu .mm-menu-outro {
  position: relative;
  background: var(--mm-deep);
  box-shadow: 0 0 0 100vmax var(--mm-deep);
  clip-path: inset(0 -100vmax);
  color: var(--mm-paper);
}

#more-matcha-menu .mm-menu-outro__inner {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(64px, 8vw, 128px) 0;
}

#more-matcha-menu .mm-menu-eyebrow--light {
  color: var(--mm-sage-light);
}

#more-matcha-menu .mm-menu-outro__title {
  margin-top: 14px;
  max-width: 16ch;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
}

#more-matcha-menu .mm-menu-outro__title .mm-menu-script {
  display: inline-block;
  font-size: 1.15em;
  line-height: 0.7;
  color: var(--mm-sage-light);
  transform: rotate(-3deg);
}

#more-matcha-menu .mm-menu-outro__milks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(244, 246, 244, 0.22);
}

#more-matcha-menu .mm-menu-outro__milks li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(244, 246, 244, 0.22);
  font: 400 clamp(18px, 15px + 0.6vw, 24px)/1.2 var(--mm-font-body);
}

#more-matcha-menu .mm-menu-outro__milks li:nth-child(odd) {
  padding-right: 16px;
}

#more-matcha-menu .mm-menu-outro__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}

#more-matcha-menu .mm-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 24px 0 26px;
  border-radius: 999px;
  background: var(--mm-paper);
  color: var(--mm-ink);
  font: 500 15px/1.2 var(--mm-font-body);
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.16s ease-out;
}

#more-matcha-menu .mm-menu-button:active {
  transform: scale(0.97);
}

#more-matcha-menu .mm-menu-outro :focus-visible {
  outline-color: var(--mm-paper);
}

/* Arrow drawn in CSS (the Shoptet editor strips inline SVG). The "→" text is only a fallback. */
#more-matcha-menu .mm-menu-arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 16px;
  height: 12px;
  font-size: 0;
  transition: transform 0.35s var(--mm-ease-out);
}

#more-matcha-menu .mm-menu-arrow::before,
#more-matcha-menu .mm-menu-arrow::after {
  content: "";
  position: absolute;
}

#more-matcha-menu .mm-menu-arrow::before {
  top: 50%;
  left: 0;
  right: 1px;
  border-top: 1.6px solid currentColor;
  transform: translateY(-50%);
}

#more-matcha-menu .mm-menu-arrow::after {
  top: 50%;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  #more-matcha-menu .mm-menu-button:hover {
    background: #FFFFFF;
  }
  #more-matcha-menu .mm-menu-button:hover .mm-menu-arrow {
    transform: translateX(3px);
  }
}

@media (min-width: 900px) {
  #more-matcha-menu .mm-menu-outro__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6vw, 120px);
    align-items: end;
  }
  #more-matcha-menu .mm-menu-outro__head { grid-row: 1 / span 2; align-self: start; }
  #more-matcha-menu .mm-menu-outro__milks { grid-column: 2; }
  #more-matcha-menu .mm-menu-outro__cta { grid-column: 2; }
}


/* --------------------------------------------------------------------------
   5. Motion — only while menu.js runs (.mm-js) and motion is allowed.
   Without JS (or with reduced motion) everything is simply visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* v2: drink cards and the intro are visible immediately (no scroll reveal),
     so a fast scroll on a phone never shows empty screens. */

  /* category switch: the list fades out, swaps, fades back in */
  #more-matcha-menu .mm-menu-list {
    transition: opacity 0.22s ease;
  }
  #more-matcha-menu .mm-menu-list.mm-is-switching {
    opacity: 0;
  }
}


/* ==========================================================================
   Shoptet page helpers — Menu page only (each rule needs :has(#more-matcha-menu)).
   Same article-page structure as /kontakty/ and /pobocky/ (template-14).
   ========================================================================== */

/* Hide Shoptet's own page title — our block has its own <h1>. */
.pageArticleDetail:has(#more-matcha-menu) > header[itemprop="headline"] {
  display: none;
}

/* Same side gutter as the homepage for content + breadcrumbs */
#content:has(#more-matcha-menu) {
  padding-left: clamp(16px, 4vw, 64px);
  padding-right: clamp(16px, 4vw, 64px);
}

#content-wrapper:has(#more-matcha-menu) > .breadcrumbs {
  padding-left: clamp(16px, 4vw, 64px);
  padding-right: clamp(16px, 4vw, 64px);
}

/* Empty paragraphs the Shoptet editor leaves around pasted blocks */
.pageArticleDetail:has(#more-matcha-menu) [itemprop="about"] > p:empty {
  display: none;
}