/* Puur Crumb catalog: three clear photo-and-menu rows.
   Static layout only; the hero, navigation and footer keep their own styles. */
:root {
  --collection-gap: clamp(var(--space-3), 4vw, var(--space-6));
  --collection-title: clamp(2.125rem, 4.2vw, 3.75rem);
  --menu-title: clamp(2rem, 3vw, 2.5rem);
  --menu-photo-height: clamp(21rem, 29vw, 25rem);
}
.collection { padding-bottom: var(--space-4); }
.collection-heading,
.bakery-menu-stack { width: 100%; max-width: 75rem; margin-inline: auto; }
.collection-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--collection-gap);
  margin-bottom: var(--space-4);
}
.collection-heading > div > p { margin-bottom: var(--space-2); }
.collection-heading > p:last-child {
  justify-self: end;
  max-width: 38ch;
  padding: 0;
  line-height: 1.6;
}
.rava-site :is(.collection-heading, .occasion-intro, .nature-statement, .visit-heading) h2 {
  font-size: var(--collection-title);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.bakery-menu-row {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: var(--collection-gap);
  padding-block: var(--space-3);
  border-top: var(--hairline) solid var(--bakery-rule);
  scroll-margin-top: 108px;
}
.bakery-menu-row:last-child { border-bottom: var(--hairline) solid var(--bakery-rule); }
.bakery-menu-row > * { min-width: 0; }
.bakery-menu-row .menu-photo {
  margin: 0;
  width: 100%;
  height: var(--menu-photo-height);
  overflow: hidden;
}
.menu-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
#cakes .menu-photo img { object-position: 50% 50%; }
#cinnamon-rolls .menu-photo img { object-position: 50% 56%; }
.menu-copy { min-width: 0; }
.menu-copy .menu-heading { display: flex; flex-direction: column; gap: 4px; }
.menu-copy .menu-heading .product-kind { margin: 0; font: 400 .8125rem/1.4 var(--font-sans); }
.rava-site .menu-copy .menu-heading h3 {
  margin: 0;
  font: 600 var(--menu-title)/1.1 var(--font-accent);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.menu-copy .menu-intro {
  margin: var(--space-1) 0 0;
  max-width: 50ch;
  font: 400 .9375rem/1.5 var(--font-sans);
  text-wrap: pretty;
}
.menu-copy .category-menu { margin: var(--space-1) 0 0; min-width: 0; }
.menu-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  font: 400 .8125rem/1.4 var(--font-sans);
}
.menu-caption > span:last-child { text-align: right; }
.bakery-menu-list { margin: 0; padding: 0; }
.bakery-menu-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-block: var(--space-1);
  border-top: var(--hairline) solid var(--bakery-rule);
}
.bakery-menu-list dt { min-width: 0; }
.bakery-menu-list .menu-item-name {
  display: block;
  font: 400 1rem/1.4 var(--font-sans);
  overflow-wrap: anywhere;
}
.bakery-menu-list dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font: 500 1rem/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.menu-copy .menu-box-note {
  margin: var(--space-1) 0 0;
  max-width: 50ch;
  font: 400 .875rem/1.5 var(--font-sans);
  text-wrap: pretty;
}
.menu-copy .product-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0;
}
.menu-copy .product-action .text-link {
  margin: 0;
  min-height: 44px;
  padding-block: var(--space-1);
  font-size: .9375rem;
  line-height: 1.4;
  text-align: left;
}
.menu-copy .product-action > span {
  max-width: 31ch;
  font: 400 .8125rem/1.5 var(--font-sans);
}

/* A consistent two-column spine from bespoke cakes to the bakery story. */
.occasion-editorial,
.nature-statement,
.order-faq {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--collection-gap);
}
.occasion-editorial { align-items: start; }
.occasion-intro { max-width: 48ch; }
.occasion-editorial > div > p {
  max-width: 42ch;
  margin-top: var(--space-3);
  text-wrap: pretty;
}
.occasion-intro .solid-link {
  margin-top: var(--space-4);
  min-height: var(--space-6);
  padding-inline: var(--space-3);
  gap: var(--space-4);
}
.order-steps li { padding-block: var(--space-3); }
.order-steps li:first-child { padding-top: var(--space-3); }
.order-steps strong { font-size: 1.125rem; }
.order-steps span { max-width: 44ch; }
.nature-statement { row-gap: var(--space-3); }
.nature-details p { max-width: 48ch; text-wrap: pretty; }
.bakery-values { margin-top: var(--space-3); }
.bakery-place { margin-top: var(--space-4); }
.bakery-place img { aspect-ratio: 3 / 2; }
.bakery-place figcaption { font-size: .875rem; }
.order-faq {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}
.order-faq h3 { font-size: 1.75rem; font-weight: 600; }
.order-faq summary { padding-block: var(--space-3); line-height: 1.5; }
.order-faq details p { max-width: 56ch; line-height: 1.65; }

.visit-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  column-gap: var(--collection-gap);
}
.visit-heading > p { justify-self: end; max-width: 30ch; }
.visit-heading h2 { max-width: 17ch; }
.visit-details {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}
.visit-details h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.visit-details p { max-width: 36ch; text-wrap: pretty; }
.opening-hours { font-size: .9375rem; line-height: 1.8; }
.opening-hours div { gap: var(--space-2); }
.opening-hours dt { min-width: 0; }
.opening-hours dd { flex-shrink: 0; }
.contact-concept { margin-top: var(--space-4); font-size: .875rem; }

@media (min-width: 768px) and (max-width: 1100px) {
  .visit-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-details > div:last-child { grid-column: 1 / -1; max-width: 42ch; }
  .visit-details > div + div { padding-top: 0; border-top: 0; }
}

@media (max-width: 767px) {
  .collection-heading,
  .occasion-editorial,
  .nature-statement,
  .visit-heading,
  .visit-details { grid-template-columns: minmax(0, 1fr); }
  .collection-heading { gap: var(--space-3); margin-bottom: var(--space-4); }
  /* Clear earlier tablet placements before switching to one column. */
  .collection-heading > div,
  .collection-heading > p:last-child,
  .nature-statement > *,
  .visit-heading > * {
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
  }
  .collection-heading > p:last-child { justify-self: start; margin: 0; max-width: 40ch; }
  .occasion-editorial { display: grid; gap: var(--space-5); }
  .occasion-editorial > div { grid-column: auto; }
  .nature-statement { display: grid; }
  .nature-statement > p { margin: 0; }
  .nature-details { margin: 0; }
  .bakery-place { margin-top: var(--space-2); }
  .bakery-place figcaption { font-size: .875rem; }
  .order-faq { display: block; margin-top: var(--space-3); }
  .order-faq h3,
  .order-faq details { grid-column: auto; grid-row: auto; }
  .order-faq h3 { margin-bottom: var(--space-2); }
  .bakery-replay { margin-top: 0; }
  .visit-heading { display: grid; gap: var(--space-3); }
  .visit-heading > p { justify-self: start; margin: 0; }
  .visit-details { gap: var(--space-3); margin-top: var(--space-4); }
  .visit-details > div + div { border-top: var(--hairline) solid var(--bakery-rule); padding-top: var(--space-3); }
  .visit-details > div:last-child { grid-column: auto; }
  .rava-site :is(.collection-heading, .occasion-intro, .nature-statement, .visit-heading) h2 { font-size: clamp(2rem, 8.8vw, 2.75rem); }
}

@media (max-width: 700px) {
  .bakery-menu-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-3);
    scroll-margin-top: 92px;
  }
  .bakery-menu-row .menu-photo { height: auto; aspect-ratio: 3 / 2; }
  .rava-site .menu-copy .menu-heading h3 { font-size: 2rem; }
  .menu-copy .menu-intro { max-width: 50ch; }
  .menu-copy .product-action { gap: var(--space-1) var(--space-2); }
  .menu-copy .product-action > span { max-width: none; }
}
@media (max-width: 359px) {
  .bakery-menu-list .menu-item-name,
  .bakery-menu-list dd { font-size: .9375rem; }
  .menu-copy .product-action { align-items: flex-start; flex-direction: column; gap: 0; }
}