/* =========================================================
   About Page Styles – Parley Rum

   This file controls ONLY the About page layout and visuals.
   If you want to change colors, fonts, or buttons site-wide,
   that usually lives in css/base.css.
   ========================================================= */


/* =========================================================
   HERO (Top section: text on left, photo on right)
   ========================================================= */
.about-hero{
  /* Two-column layout: text area is wider than photo area */
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  padding: 22px;
}

/* Small label above the big headline (“About Us”) */
.kicker{
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Limit paragraph line length for readability */
.about-hero__copy p{
  max-width: 62ch;
}

/* The row that holds the hero button(s) */
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* A “ghost” button style (light, semi-transparent) */
.btn-ghost{
  background: rgba(255,255,255,.55);
}

/* Founder label + name pill */
.founder-line{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.60);
}

.founder-line__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.founder-line__name{
  font-weight: 900;
  color: var(--text);
}

/* The hero photo block (background-image is set in the HTML) */
.about-photo{
  height: 400px;

  /* Makes the image fill the box without stretching */
  background-size: cover;

  /* Controls where the image is “focused” inside the box */
  background-position: 50% 25%;
}

/* Small caption under the photo */
.about-photo__cap{
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
}


/* =========================================================
   SECTION HEAD (used before grids)
   ========================================================= */
.section-head{
  max-width: 74ch;
  margin-bottom: 18px;
}


/* =========================================================
   STORY GRID (the 4 cards under “Our Story”)
   Uses a 12-column grid for consistent spacing.
   ========================================================= */
.story-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.story-card{
  padding: 16px;
}

/* The pill label at the top of each story card */
.story-card__tag{
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(201,150,46,.18);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

/* Desktop layout: cards alternate left/right columns */
.story-card:nth-child(1),
.story-card:nth-child(3){
  grid-column: 1 / span 6;
}

.story-card:nth-child(2),
.story-card:nth-child(4){
  grid-column: 7 / span 6;
}


/* =========================================================
   COPPER STILL FEATURE (big background image + text box)
   ========================================================= */
.still-feature{
  position: relative;
  min-height: 420px;
  overflow: hidden;
}

/* Full-background image layer */
.still-feature__media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  /* Slight “cinematic” color boost */
  filter: saturate(1.08) contrast(1.05);
}

/* Gradient overlay for readability (the text sits on top of this) */
.still-feature::after{
  background:
    linear-gradient(90deg,
      rgba(247,239,230,.96) 0%,
      rgba(247,239,230,.80) 40%,
      rgba(247,239,230,.45) 70%,
      rgba(247,239,230,.15) 100%
    );
}

/* The content box that sits above the image */
.still-feature__content{
  position: relative;
  max-width: 560px;
  padding: 22px;
  margin: 22px;

  /* Slightly see-through so the background still feels present */
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}

.still-feature__content p{
  color: rgba(43,27,15,.75);
}


/* =========================================================
   PRODUCT TEASERS (two tiles)
   ========================================================= */
.teaser-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.teaser{
  grid-column: span 6;
}

.teaser__media{
  height: 240px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
}

/* Slight alternate focus for the barrel image */
.teaser__media--alt{
  background-position: center 60%;
}

.note{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted2);
}


/* =========================================================
   MOTTO BANNER (large image with text overlay)
   ========================================================= */
.section-tight{
  padding-top: 18px;
}

.banner{
  position: relative;
  min-height: 360px;
  overflow: hidden;
}

.banner__media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Gradient overlay to keep text readable on bright photos */
.banner__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(247,239,230,.95),
      rgba(247,239,230,.45),
      rgba(247,239,230,.10)
    );
}

.banner__inner{
  position: relative;
  padding: 22px;
  max-width: 64ch;
}


/* =========================================================
   VALUES (3 tiles in a row)
   ========================================================= */
.values{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.value{
  grid-column: span 4;
  padding: 16px;
}

.value__icon{
  font-size: 22px;
  margin-bottom: 6px;
}


/* =========================================================
   RESPONSIVE (mobile layout)
   When the screen is smaller than 920px wide:
   - The hero becomes one column
   - All cards/tiles stack vertically
   - The still gradient becomes vertical instead of horizontal
   ========================================================= */
@media (max-width: 920px){
  .about-hero{
    grid-template-columns: 1fr;
  }

  .story-card,
  .teaser,
  .value{
    grid-column: 1 / -1;
  }

  .still-feature::after{
    background:
      linear-gradient(180deg,
        rgba(247,239,230,.95),
        rgba(247,239,230,.60),
        rgba(247,239,230,.20)
      );
  }
}