/* about-story
   New About page section. Every value maps to an existing theme token in
   src/css/_variables.scss, _fontPrototypes.scss or _breakpoints.scss, noted inline.
   Port to SCSS as src/css/sections/_aboutStory.scss when implementing.
-------------------------------------- */

.about-story {
  --about-gap: 20px;          /* grid gutter used by home product/bottle-shop grids */
  --about-blockSpace: 70px;   /* 2 x .pt-35 */
  --about-cream: #f9f8f0;     /* $color-yellow */
  --about-ink: #000;          /* $color-black, body text colour */

  padding-bottom: var(--about-blockSpace);
}

.about-story__block + .about-story__block {
  margin-top: var(--about-blockSpace);
}

.about-story img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* aspectRatioedMedia_mixin */
}

.about-story figure {
  margin: 0;
}

/* Shared paragraph style: %fontSize-18, weight/line-height from .imagefull-text .text */
.about-story__copy {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* $font-body */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--about-ink);
}

.about-story__copy p {
  margin: 0;
}

/* Image + text tile (portrait photo beside a flat cream block, as .yellow-blocks .block) */
.about-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
}

.about-split--reverse {
  grid-template-columns: 7fr 5fr;
}

.about-split--reverse .about-split__media {
  order: 2;
}

.about-split__media {
  min-height: 100%;
}

.about-split__text {
  background: var(--about-cream);
  display: flex;
  align-items: center;
  padding: 60px 80px;
}

/* Two landscape photos side by side. Columns are weighted by each photo's
   aspect ratio so both render at the same height without cropping. */
.about-pair {
  display: grid;
  grid-template-columns: var(--colA, 1fr) var(--colB, 1fr);
  gap: var(--about-gap);
}

/* Centred text between image rows, as .imagefull-text .text */
.about-text {
  max-width: 780px;          /* .page-content / .imagefull-text .text max-width */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Full-width cream band for the label artwork, as the home page Bottle Shops band */
.about-band {
  background: var(--about-cream);
  padding-top: var(--about-blockSpace);
  padding-bottom: var(--about-blockSpace);
}

.about-labels {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 4.66cqw;       /* .infoGrid .infoGrid__holder */
  align-items: start;
  max-width: 1024px;
  margin: 50px auto 0;
}

.about-labels img {
  height: auto;
}

/* $bp: laptop and below (max-width: 1160px) */
@media only screen and (max-width: 1160px) {
  .about-split__text {
    padding: 50px 50px;
  }

  .about-labels {
    column-gap: 30px;
  }
}

/* $bp: tablet and below (max-width: 832px), where .padding-sides drops to 15px */
@media only screen and (max-width: 832px) {
  .about-story {
    --about-blockSpace: 40px;
  }

  .about-story__copy {
    font-size: 16px;         /* %fontSize-18 at largePhone and below */
  }

  .about-split,
  .about-split--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-split--reverse .about-split__media {
    order: 0;
  }

  .about-split__media {
    aspect-ratio: 4 / 5;
  }

  .about-split__text {
    padding: 40px 20px;      /* .yellow-blocks .block at largePhone */
  }

  .about-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-text {
    text-align: left;
  }
}

/* $bp: largePhone and below (max-width: 639px) */
@media only screen and (max-width: 639px) {
  .about-labels {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
    max-width: 320px;
    margin-top: 30px;
  }
}