/* il CORSO · Speisekarte
   Paper surface. Tokens from DESIGN-PACKAGE §2 (defined on :root by the main stylesheet).
   Accent only on: active chip underline, focus ring. */

#karte{
  --chips-h:52px;
  background:var(--paper);
  color:var(--on-paper);
}

/* ---------- Chip bar ---------- */
.karte-chips{
  position:sticky;
  top:var(--nav-h, 64px);
  z-index:5;
  display:flex;
  align-items:stretch;
  gap:4px;
  min-height:var(--chips-h);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--paper);
  border-bottom:1px solid var(--paper-2);
}
.karte-chips::-webkit-scrollbar{display:none}

/* Edge fades: sticky pseudo-elements inside the scroller stay pinned to its edges */
.karte-chips::before,
.karte-chips::after{
  content:"";
  position:sticky;
  z-index:1;
  flex:0 0 28px;
  pointer-events:none;
  transition:opacity .2s ease;
}
.karte-chips.at-start::before,
.karte-chips.at-end::after{opacity:0}
.karte-chips::before{
  left:0;
  margin-right:-28px;
  background:linear-gradient(90deg, var(--paper) 20%, transparent);
}
.karte-chips::after{
  right:0;
  margin-left:-28px;
  background:linear-gradient(270deg, var(--paper) 20%, transparent);
}

.chip{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  scroll-snap-align:start;
  scroll-margin-inline:28px;
  font-family:'Marcellus SC', serif;
  font-weight:400;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--on-paper-2);
  text-decoration:none;
  transition:color .2s ease;
}
.chip::after{
  content:"";
  position:absolute;
  left:12px;
  right:calc(12px - .18em); /* trailing letter-spacing */
  bottom:9px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s ease;
}
.chip:hover{color:var(--on-paper)}
.chip.is-active{color:var(--on-paper)}
.chip.is-active::after{transform:scaleX(1)}
.chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-4px;
  border-radius:2px;
}

/* ---------- Categories ---------- */
.karte-list{
  margin-top:clamp(24px, 5vw, 48px);
}
.kat{
  scroll-margin-top:calc(var(--nav-h, 64px) + var(--chips-h) + 12px);
  border-top:1px solid var(--paper-2);
}
.kat:last-child{border-bottom:1px solid var(--paper-2)}

.kat-details > summary{
  list-style:none;
  display:grid;
  grid-template-columns:44px 1fr 20px;
  grid-template-areas:
    "orn title mark"
    "orn count mark";
  column-gap:16px;
  row-gap:2px;
  align-items:center;
  padding:22px 0;
  cursor:pointer;
  color:var(--on-paper);
  -webkit-tap-highlight-color:transparent;
  border-radius:2px;
}
.kat-details > summary::-webkit-details-marker{display:none}
.kat-details > summary::marker{content:""}

.kat-orn{
  grid-area:orn;
  display:block;
  width:44px;
  height:44px;
  color:var(--on-paper);
}
.kat-orn .motif{
  display:block;
  width:44px;
  height:44px;
  overflow:visible;
}

.kat-details h3{
  grid-area:title;
  align-self:end;
  margin:0;
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  line-height:1.15;
  letter-spacing:.06em;
  color:var(--on-paper);
  overflow-wrap:anywhere;
}
.kat-count{
  grid-area:count;
  align-self:start;
  font-family:'Marcellus SC', serif;
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-paper-2);
}

/* Custom marker: a hairline plus that becomes a minus */
.kat-details > summary::after{
  content:"";
  grid-area:mark;
  justify-self:end;
  width:14px;
  height:14px;
  background:
    linear-gradient(var(--on-paper), var(--on-paper)) center / 14px 1px no-repeat,
    linear-gradient(var(--on-paper), var(--on-paper)) center / 1px 14px no-repeat;
  transition:transform .3s ease, background-size .3s ease;
}
.kat-details[open] > summary::after{
  background-size:14px 1px, 1px 0;
  transform:rotate(180deg);
}

.kat-details > summary:focus-visible,
.legende > summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

/* Smooth open/close where supported */
@supports (interpolate-size: allow-keywords){
  .kat-details,
  .legende,
  .gf-note{interpolate-size:allow-keywords}
  .kat-details::details-content,
  .legende::details-content,
  .gf-note::details-content{
    block-size:0;
    overflow:clip;
    transition:block-size .35s ease, content-visibility .35s allow-discrete;
  }
  .kat-details[open]::details-content,
  .legende[open]::details-content,
  .gf-note[open]::details-content{block-size:auto}
  .karte-init .kat-details::details-content{transition:none}
}

/* ---------- Dishes ---------- */
.dishes{
  list-style:none;
  margin:0;
  padding:0 0 28px;
}
.dish{
  display:grid;
  grid-template-columns:auto 1fr auto;
  column-gap:14px;
  align-items:baseline;
  padding:14px 0;
  border-top:1px solid var(--paper-2);
  break-inside:avoid;
}
.dish:first-child{border-top:0}

/* An open category shows its dishes on a sugar-beige panel over the green page.
   The paper tokens are flipped locally, so every dish/cart rule keeps working unchanged. */
.kat-details .dishes{
  --on-paper:#2B2A27;
  --on-paper-2:#5A574F;
  --on-paper-rgb:43,42,39;
  --paper-2:rgba(43,42,39,.16);
  --accent-on-paper:#7E2F2E;
  margin:0 0 36px;
  padding:4px 16px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:2px;
  background:linear-gradient(160deg, #F4ECDD, #EADFCB);
  color:var(--on-paper);
  box-shadow:0 14px 24px -12px rgba(0,0,0,.55);
}
@media (min-width:720px){
  .kat-details .dishes{padding:8px 28px 16px}
}

.dish .no{
  min-width:3.4em;
  font-family:'Marcellus SC', serif;
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--on-paper-2);
  font-variant-numeric:tabular-nums;
}
.dish-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.dish .name{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:1.0625rem;
  line-height:1.3;
  color:var(--on-paper);
  overflow-wrap:break-word;
}
.dish .desc{
  font-family:'Jost', sans-serif;
  font-weight:400;
  font-size:.875rem;
  line-height:1.5;
  color:var(--on-paper-2);
}
.dish .price{
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1rem;
  color:var(--on-paper);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
  text-align:right;
}

/* One photo per category, in its header row. The box keeps the photo's own 4:3 shape,
   so the dish is never cropped; it sits a little in from the right and fades left into the paper */
.kat-details > summary.has-photo{
  --photo-w:156px;
  --photo-in:12px;
  position:relative;
  isolation:isolate;
  min-height:calc(var(--photo-w) * .75 + 8px);
  padding-right:calc(var(--photo-w) + var(--photo-in) + 16px);
}
.kat-photo{
  position:absolute;
  top:50%;
  right:var(--photo-in);
  z-index:-1;
  width:var(--photo-w);
  height:auto;
  aspect-ratio:4 / 3;
  transform:translateY(-50%);
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%);
          mask-image:linear-gradient(90deg, transparent, #000 22%);
}
/* phones: the photo takes over from the line-art icon so long titles keep whole words */
@media (max-width:719px){
  .kat-details > summary.has-photo{
    --photo-w:112px;
    --photo-in:6px;
    grid-template-columns:1fr 20px;
    grid-template-areas:"title mark" "count mark";
  }
  .kat-details > summary.has-photo .kat-orn{display:none}
  .kat-details > summary.has-photo h3{overflow-wrap:normal; hyphens:auto}
}

/* ---------- Legend ---------- */
.legende{
  margin-top:clamp(32px, 6vw, 56px);
  border-top:1px solid var(--paper-2);
  border-bottom:1px solid var(--paper-2);
}
.legende > summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  cursor:pointer;
  font-family:'Marcellus SC', serif;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-paper-2);
  border-radius:2px;
  -webkit-tap-highlight-color:transparent;
}
.legende > summary::-webkit-details-marker{display:none}
.legende > summary::marker{content:""}
.legende > summary::after{
  content:"";
  flex:0 0 12px;
  height:12px;
  background:
    linear-gradient(var(--on-paper-2), var(--on-paper-2)) center / 12px 1px no-repeat,
    linear-gradient(var(--on-paper-2), var(--on-paper-2)) center / 1px 12px no-repeat;
  transition:background-size .3s ease;
}
.legende[open] > summary::after{background-size:12px 1px, 1px 0}

.legende-body{
  display:grid;
  gap:28px;
  padding:4px 0 28px;
}
.legende-h{
  margin:0 0 10px;
  font-family:'Marcellus SC', serif;
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-paper);
}
.legende-list{margin:0}
.legende-row{
  display:grid;
  grid-template-columns:2.6em 1fr;
  gap:10px;
  padding:5px 0;
  font-family:'Jost', sans-serif;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--on-paper-2);
}
.legende-row dt{
  font-family:'Marcellus SC', serif;
  letter-spacing:.08em;
  color:var(--on-paper);
  font-variant-numeric:tabular-nums;
}
.legende-row dd{margin:0}

/* ---------- Touch ---------- */
@media (pointer:coarse){
  .chip{min-height:44px}
  .kat-details > summary,
  .legende > summary{min-height:44px}
}

/* ---------- Wider screens ---------- */
@media (min-width:720px){
  .dish{column-gap:20px}
  .dish .name{font-size:1.125rem}
  .legende-body{grid-template-columns:1fr 1fr; gap:40px}
}

@media (min-width:1100px){
  .kat-details > summary{
    grid-template-columns:44px 1fr auto 20px;
    grid-template-areas:"orn title count mark";
    padding:28px 0;
  }
  .kat-details h3,
  .kat-count{align-self:center}
  .dishes{
    columns:2;
    column-gap:64px;
    column-rule:1px solid var(--paper-2);
    padding-bottom:36px;
  }
  .kat-details .dishes{padding:12px 32px 20px}
  .dish{border-top:0; border-bottom:1px solid var(--paper-2)}
}

@media (prefers-reduced-motion:reduce){
  .chip,
  .chip::after,
  .karte-chips::before,
  .karte-chips::after,
  .kat-details > summary::after,
  .legende > summary::after{transition:none}
  .kat-details::details-content,
  .legende::details-content,
  .gf-note::details-content{transition:none}
}