/* One block per page section, in page order. Colours and sizes come from tokens.css only. */

/* ---------- Hero: Dodla's banners edge to edge, our headline in a band below ---------- */
/* The band carries the bottom spacing, so hiding it leaves no gap above the navy strip. */
.hero {
  padding-block: 0;
}

/* Fixed window in banner 1's shape, so switching slides never moves the page.
   Short, wide screens cap it, so the whole banner is in view without scrolling. */
.hero > .carousel {
  grid-column: full;
}

.carousel__stage {
  position: relative;
}

.carousel__viewport {
  position: relative;
  aspect-ratio: 1400 / 788;
  max-block-size: calc(100svh - var(--header-height));
  width: 100%;
  overflow: hidden;
  background-color: var(--banner-curd-left);
  touch-action: pan-y;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* Flat colours matched to the banner's edges fill whatever the banner leaves empty. */
.carousel__slide--curd {
  background: linear-gradient(to right, var(--banner-curd-left) 50%, var(--banner-curd-right) 50%);
}

/* Sits on the frame's bottom edge, so only its sky is extended, and the arrows stay clear of the packs. */
/* The strip is the banner's own top row, stretched upward, so the sky carries on with no join. */
.carousel__slide--range {
  background: var(--banner-range-top) url("../assets/images/dodla-range-sky.png") top / 100% 100% no-repeat;
}

.carousel__slide--range img {
  object-position: bottom;
}

/* Without JS only the first banner shows. */
.carousel__slide:not(:first-child) {
  display: none;
}

.carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Banners are always shown whole: contained, never cropped. */
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.has-js .carousel.is-ready .carousel__slide:not(:first-child) {
  display: grid;
}

.has-js .carousel__slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 400ms var(--ease-out),
    visibility 0s linear 400ms;
}

.has-js .carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-out);
}

.carousel__btn {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background-color: var(--color-button);
  color: var(--color-button-text);
  box-shadow: 0 0 0 2px var(--color-button-text);
}

.carousel__prev {
  inset-inline-start: var(--space-2xs);
}

.carousel__next {
  inset-inline-end: var(--space-2xs);
}

.carousel__btn:hover {
  background-color: var(--color-button-hover);
}

.carousel__btn:active {
  background-color: var(--color-button-active);
}

.carousel__btn:focus-visible {
  outline-offset: 2px;
}

.carousel__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.carousel:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -4px;
}

@media (min-width: 40em) {
  .carousel__prev {
    inset-inline-start: var(--space-xs);
  }

  .carousel__next {
    inset-inline-end: var(--space-xs);
  }
}

/* ---------- Freshness strip: navy, so red stays for the buttons ---------- */
.freshness {
  --focus-ring: var(--color-milk);
  padding-block: var(--space-m) var(--space-s);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.freshness__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
}

.freshness__list li {
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.freshness__list li::before {
  content: "";
  display: block;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  margin-block-end: var(--space-3xs);
  background: var(--leaf) no-repeat left center / contain;
}

@media (min-width: 64em) {
  .freshness__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-l);
  }
}

/* ---------- Products: picture cards, with Curd as the lead ----------
   Seven cards fill every row: lead wide gives 8 cells on 2 columns and on 4.
   On 3 columns the last card goes wide too, for 9 cells. */
.products {
  padding-block-start: 0;
}

.divider--from-navy {
  margin-block-end: var(--space-xl);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xs);
  background-color: var(--surface);
  border: var(--border-hair);
  border-radius: var(--radius-card);
}

.product-card__photo {
  display: block;
}

/* Product cut-outs are transparent, so the card supplies the soft background. */
.product-card__photo img {
  width: 100%;
  background-color: var(--surface-alt);
  border-radius: var(--radius-btn);
}

.product-card:nth-child(even) .product-card__photo img {
  background-color: var(--surface-fresh);
}

.product-card__name {
  margin-block-start: var(--space-2xs);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.product-card--lead {
  grid-column: span 2;
}

.product-card--lead .product-card__name {
  font-size: var(--step-2);
  font-weight: 700;
}

.products__cta {
  max-width: none;
  text-align: center;
  margin-block-start: var(--space-l);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card {
    transition:
      translate var(--duration-quick) var(--ease-out),
      border-color var(--duration-quick) var(--ease-out);
  }

  .product-card:hover {
    translate: 0 -2px;
    border-color: var(--text);
  }
}

@media (min-width: 40em) {
  /* Equal rows, so one two-line name doesn't make its row taller than the rest. */
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-s);
  }

  .product-card--lead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--space-s);
  }

  .product-card--lead .product-card__name {
    margin-block-start: 0;
  }

  .product-card--wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: var(--space-s);
  }

  .product-card--wide .product-card__name {
    margin-block-start: 0;
    font-size: var(--step-2);
    font-weight: 700;
  }
}

@media (min-width: 64em) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-card--wide {
    grid-column: span 1;
    display: flex;
    align-items: stretch;
  }

  .product-card--wide .product-card__name {
    margin-block-start: var(--space-2xs);
    font-size: var(--step-0);
    font-weight: 600;
  }
}

/* ---------- Ice creams: white cards on one navy panel ----------
   Ten slots become twelve once the two wide cards are counted, so the order holds with no holes:
   3 columns give four full rows, and 5 columns fit once the heading takes the first three cells. */
.icecream {
  background-color: var(--surface-alt);
}

.ice-cart {
  --focus-ring: var(--color-milk);
  --button-fill: var(--color-button-on-dark);
  --button-fill-hover: var(--color-button-on-dark-hover);
  --button-fill-active: var(--color-button-on-dark-active);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-l) var(--gutter);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

/* Phones: edge to edge, because two card columns need every pixel. */
main > section > .ice-cart {
  grid-column: full;
}

.ice-cart__head,
.ice-cart__ask {
  grid-column: 1 / -1;
}

.ice-cart__head {
  margin-block-end: var(--space-2xs);
}

.ice-cart .kicker {
  color: var(--fresh-on-dark);
}

.ice-cart h2 {
  margin-block-start: var(--space-3xs);
  color: var(--text-inverse);
}

.ice-cart__note {
  margin-block-start: var(--space-2xs);
  max-width: 34ch;
}

/* The margin makes up the rest of the Products button's spacing, on top of the grid's own gap. */
.ice-cart__ask {
  margin-block-start: calc(var(--space-l) - var(--space-xs));
  max-width: none;
  text-align: center;
}

.ice-card {
  --focus-ring: var(--color-navy);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-2xs);
  background-color: var(--surface);
  color: var(--text);
  border-radius: var(--radius-card);
}

.ice-card__photo {
  width: 100%;
}

/* Product cut-outs are transparent, so the card supplies the soft background. */
.ice-card__photo img {
  width: 100%;
  background-color: var(--surface-alt);
  border-radius: var(--radius-btn);
}

.ice-card:nth-of-type(even) .ice-card__photo img {
  background-color: var(--surface-fresh);
}

.ice-card__name {
  margin-block-start: var(--space-2xs);
  font-size: var(--step-1);
  line-height: var(--leading-tight);
}

.ice-card__size {
  margin-block-start: var(--space-3xs);
  max-width: none;
  padding-inline: var(--space-2xs);
  background-color: var(--surface-fresh);
  color: var(--fresh-ink);
  border-radius: var(--radius-pill);
  font-size: var(--step-n1);
  font-weight: 600;
  line-height: var(--leading-snug);
  white-space: nowrap;
}

.ice-card__note {
  margin-block-start: var(--space-3xs);
  font-size: var(--step-n1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

@media (min-width: 40em) {
  main > section > .ice-cart {
    grid-column: content;
  }

  .ice-cart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
    padding: var(--space-l);
    border-radius: var(--radius-card);
  }

  .ice-cart__ask {
    margin-block-start: calc(var(--space-l) - var(--space-s));
  }

  /* Picture left, words right: larger art without doubling the row height. */
  .ice-card--wide {
    grid-column: span 2;
    display: grid;
    /* min-content: the column is as wide as "Premium" or the size pill, so a name breaks only between words. */
    grid-template-columns: minmax(0, 1fr) min-content;
    grid-template-rows: 1fr 1fr;
    column-gap: var(--space-s);
  }

  .ice-card--wide .ice-card__photo {
    grid-row: 1 / -1;
    align-self: center;
  }

  .ice-card--wide .ice-card__name {
    align-self: end;
    margin-block-start: 0;
    font-size: var(--step-2);
  }

  .ice-card--wide .ice-card__size {
    align-self: start;
    justify-self: start;
  }
}

@media (min-width: 64em) {
  .ice-cart {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ice-cart__head {
    grid-column: span 3;
    align-self: center;
    margin-block-end: 0;
  }
}

@media (min-width: 80em) {
  .ice-cart {
    padding: var(--space-xl);
  }
}

/* ---------- From Dodla to your door: a route, not a card grid ---------- */
.process__top {
  /* The text takes whatever the capped photo leaves. */
  --split-cols: minmax(0, 1fr) var(--photo-truck-max);
  /* The text is shorter than the photo, so it sits level with the photo's middle. */
  --split-align: center;
  margin-block-end: var(--space-2xl);
}

.process__top .section-head {
  margin-block-end: 0;
}

.process__photo {
  display: block;
  max-inline-size: var(--photo-truck-max);
}

.process__photo img {
  width: 100%;
  border-radius: var(--radius-card);
}

.process__steps {
  position: relative;
  display: grid;
  gap: var(--space-l);
  padding-inline-start: 3.25rem;
  list-style: none;
  counter-reset: step;
}

/* The road the milk travels. */
.process__steps::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem 0.75rem;
  inset-inline-start: 1rem;
  border-inline-start: 2px solid var(--rule);
}

.process__step {
  position: relative;
  counter-increment: step;
}

.process__step::before {
  content: counter(step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -3.25rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-round);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.process__title {
  font-size: var(--step-1);
  margin-block-end: var(--space-2xs);
}

.process__step p {
  color: var(--text-muted);
}

/* The route turns horizontal, with every other stop set lower. */
@media (min-width: 64em) {
  .process__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-l);
    padding-inline-start: 0;
    padding-block-start: 3.25rem;
  }

  .process__steps::before {
    inset-block: 1rem auto;
    inset-inline: 0;
    border-inline-start: 0;
    border-block-start: 2px solid var(--rule);
  }

  .process__step::before {
    inset-block-start: -3.25rem;
    inset-inline-start: 0;
  }

  .process__step:nth-child(even) {
    margin-block-start: var(--space-xl);
  }

  .process__step:nth-child(even)::before {
    inset-block-start: calc(-3.25rem - var(--space-xl));
  }
}

/* ---------- Quality: one plain record card, set to the right ---------- */
.quality {
  background-color: var(--surface-alt);
}

.report {
  max-width: 50rem;
  padding: var(--space-l) var(--space-m) var(--space-s);
  background-color: var(--surface);
  border-radius: var(--radius-card);
}

.report__head {
  padding-block-end: var(--space-s);
  border-block-end: var(--border-firm);
}

.report__head h2 {
  margin-block-start: var(--space-3xs);
}

.report__row {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-s);
  border-block-end: var(--border-hair);
}

.report__row:last-child {
  border-block-end: 0;
}

.report__row dt {
  font-weight: 600;
}

@media (min-width: 40em) {
  .report {
    padding: var(--space-xl) var(--space-xl) var(--space-m);
  }

  .report__row {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

@media (min-width: 64em) {
  .report {
    margin-inline-start: auto;
    margin-inline-end: var(--space-2xl);
  }
}

/* ---------- Distributor enquiry form ---------- */
.slip {
  --focus-ring: var(--color-navy);
  max-width: 52rem;
  margin-block-start: var(--space-2xl);
  padding: var(--space-l) var(--space-m) var(--space-m);
  background-color: var(--surface);
  color: var(--text);
  border-radius: var(--radius-card);
}

.slip__head {
  padding-block-end: var(--space-s);
  margin-block-end: var(--space-m);
  border-block-end: var(--border-hair);
}

.slip__title {
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--text);
}

.slip__note {
  margin-block-start: var(--space-2xs);
  font-size: var(--step-n1);
  color: var(--text-muted);
}

.slip__form {
  display: grid;
  gap: var(--space-m) var(--space-l);
}

.form-field {
  display: grid;
  gap: var(--space-3xs);
  max-width: none;
  align-content: start;
}

.form-field label,
.form-field legend {
  font-size: var(--step-n1);
  font-weight: 600;
}

.form-field input:not([type="radio"], [type="checkbox"]),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--surface);
  border: var(--border-control);
  border-radius: var(--radius-btn);
}

.form-field select {
  appearance: none;
  padding-inline-end: 2.25rem;
  background-image: var(--chevron);
  background-position: right var(--space-xs) center;
  background-size: 0.75rem 0.5rem;
  background-repeat: no-repeat;
}

.form-field textarea {
  resize: vertical;
}

.form-field--choice {
  border: 0;
  padding: 0;
  margin: 0;
}

.form-field--choice legend {
  margin-block-end: var(--space-2xs);
  padding: 0;
}

.form-field--choice p {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
}

.form-field--choice input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-button);
}

.form-field--choice label {
  font-size: var(--step-0);
  font-weight: 400;
}

.form-field__hint {
  font-size: var(--step-n1);
  color: var(--text-muted);
}

.form-field__error {
  font-size: var(--step-n1);
  font-weight: 600;
  color: var(--accent-ink);
}

.form-field [aria-invalid="true"] {
  border-color: var(--accent-ink);
  outline: 1px solid var(--accent-ink);
}

.slip__submit {
  margin-block-start: var(--space-xs);
}

@media (min-width: 40em) {
  .slip {
    padding: var(--space-xl) var(--space-xl) var(--space-l);
  }

  .slip__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-field--wide {
    grid-column: 1 / -1;
  }
}

/* ---------- For distributors: a navy band ---------- */
.retailers {
  --focus-ring: var(--color-milk);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

.retailers__inner {
  --split-cols: 1fr 1fr;
  --split-align: center;
}

.retailers a {
  color: inherit;
}

.retailers .slip a {
  color: var(--text);
}

.retailers .kicker {
  color: var(--fresh-on-dark);
}

.retailers__pitch h2 {
  margin-block: var(--space-2xs) var(--space-m);
  color: var(--text-inverse);
}

.retailers__pitch > * + * {
  margin-block-start: var(--space-s);
}

.retailers__list {
  padding-inline-start: 1.2em;
}

.retailers__list li::marker {
  color: var(--fresh-on-dark);
}

.retailers__photo {
  display: block;
  margin-block-start: var(--space-m);
}

.retailers__photo img {
  width: 100%;
  border-radius: var(--radius-card);
}

.retailers .slip {
  margin-block-start: var(--space-s);
}

@media (min-width: 64em) {
  .retailers .slip {
    margin-block-start: 0;
  }
}

/* ---------- FAQ: two columns of questions ---------- */
.faq__list {
  display: grid;
  gap: 0 var(--space-2xl);
  align-items: start;
}

.faq__item {
  border-block-start: var(--border-hair);
}

.faq__item:last-child {
  border-block-end: var(--border-hair);
}

.faq__item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: baseline;
  padding-block: var(--space-s);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::before {
  content: "Q.";
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-button);
}

/* Plus sign drawn with two bars; the vertical bar drops away when open. */
.faq__item summary::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  align-self: center;
  color: var(--color-button);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.faq__item[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.faq__item summary:hover::after,
.faq__item[open] summary::after {
  color: var(--color-button-hover);
}

.faq__item p {
  padding: 0 0 var(--space-m) calc(1.5ch + var(--space-xs));
  color: var(--text-muted);
}

@media (min-width: 64em) {
  .faq__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* In two columns each column needs its own closing rule. */
  .faq__item:nth-last-child(2) {
    border-block-end: var(--border-hair);
  }
}

/* ---------- Contact: a visiting card ---------- */
.contact {
  background-color: var(--surface-alt);
}

.contact__inner {
  --split-cols: 28rem minmax(0, 1fr);
  --split-align: stretch;
}

.contact__intro h2 {
  margin-block: var(--space-2xs) var(--space-s);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block: var(--space-l);
}

.contact__map {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* The ratio reserves the space before the map loads, so nothing moves. */
.contact__map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--surface);
  border-radius: var(--radius-card);
}

.contact__map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 40em) {
  .contact__map-frame {
    aspect-ratio: 16 / 9;
  }
}

/* Heading and buttons run across the top, then the card sets the height the map fills. */
@media (min-width: 64em) {
  .contact__inner {
    grid-template-areas:
      "intro intro"
      "card map";
  }

  .contact__intro {
    grid-area: intro;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .contact__intro > * {
    grid-column: 1;
  }

  /* Level with the intro line, so the buttons sit at the foot of the heading block. */
  .contact__intro .contact__actions {
    grid-column: 2;
    grid-row: 3;
    margin-block: 0;
  }

  .visiting-card {
    grid-area: card;
  }

  .contact__map {
    grid-area: map;
  }

  .contact__map-frame {
    flex: 1;
    aspect-ratio: auto;
  }
}

.visiting-card {
  max-width: 28rem;
  padding: var(--space-l) var(--space-m);
  background-color: var(--surface);
  border-radius: var(--radius-card);
  font-style: normal;
}

.visiting-card__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.visiting-card__trade {
  margin-block: var(--space-2xs) var(--space-m);
  font-size: var(--step-n1);
  font-weight: 600;
  color: var(--fresh-ink);
}

.visiting-card__contacts {
  display: grid;
  gap: var(--space-s);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-s);
  border-block-start: var(--border-hair);
}

.visiting-card__topic,
.visiting-card__person,
.visiting-card__actions {
  display: block;
}

.visiting-card__topic {
  font-size: var(--step-n1);
  font-weight: 600;
  color: var(--fresh-ink);
}

.visiting-card__person {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.visiting-card__actions {
  font-size: var(--step-n1);
}

/* ---------- Disabled controls: last, so they beat every hover and active rule above ---------- */
.btn:disabled,
.btn[aria-disabled="true"],
.carousel__btn:disabled {
  border-color: var(--color-button-disabled);
  background-color: var(--color-button-disabled);
  color: var(--color-button-disabled-text);
  cursor: not-allowed;
}