/* ========================================================================== 
   Alpaca Farms — why alpacas are raised
   Production path: /alpacas/why-alpacas-are-raised/style/purpose.css
   ========================================================================== */

.purpose-page{
  --guide-accent:#785c3e;
  --purpose-fiber:#9a7044;
  --purpose-herd:#557461;
  --purpose-goods:#965f52;
  --purpose-learn:#456c78;
  --purpose-cream:#f0e8da;
  --purpose-sage:#e2e8e0;
  --purpose-ink:#304842;
}

/* Hero */
.purpose-hero{
  display:grid;
  grid-template-columns:minmax(0, .83fr) minmax(24rem, 1.17fr);
  gap:0 clamp(2.5rem, 8vw, 7rem);
  align-items:center;
  padding-top:clamp(1rem, 4vw, 2.75rem);
}

.purpose-hero h1{
  max-width:10ch;
  font-size:clamp(2.7rem, 5.8vw, 5rem);
  line-height:1.01;
}

.purpose-hero__lede{
  color:var(--fleece-brown);
  font-size:clamp(1.04rem, 2vw, 1.2rem);
  line-height:1.65;
}

.purpose-hero__copy > p:last-child{
  color:var(--fleece-brown);
}

.purpose-hero__media{
  position:relative;
  margin:0 1rem 1rem 0;
}

.purpose-hero__media::after{
  content:"";
  position:absolute;
  inset:1rem -1rem -1rem 1rem;
  z-index:-1;
  background:linear-gradient(130deg, #e7dcc8, #dce5dc);
  border:1px solid #d2c6b4;
}

.purpose-hero__media img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border:1px solid var(--fleece-beige);
}

.purpose-hero__key{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  margin-top:3rem;
  padding:1px;
  background:var(--fleece-beige);
}

.purpose-hero__key > div{
  position:relative;
  min-height:6.5rem;
  padding:1.15rem 1.2rem 1rem 2.1rem;
  background:var(--fleece-card);
}

.purpose-dot{
  position:absolute;
  top:1.35rem;
  left:1rem;
  width:.55rem;
  height:.55rem;
  background:var(--purpose-fiber);
  border-radius:50%;
}

.purpose-dot--herd{ background:var(--purpose-herd); }
.purpose-dot--goods{ background:var(--purpose-goods); }
.purpose-dot--learn{ background:var(--purpose-learn); }

.purpose-hero__key strong,
.purpose-hero__key small{
  display:block;
}

.purpose-hero__key strong{
  margin-bottom:.3rem;
  font-family:var(--font-display);
  font-size:1rem;
}

.purpose-hero__key small{
  color:var(--fleece-brown);
  font-size:.74rem;
  line-height:1.45;
}

/* Intro statement */
.purpose-intro{
  display:grid;
  grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  padding-block:clamp(2.75rem, 7vw, 5rem);
  border-block:1px solid var(--fleece-beige);
}

.purpose-intro__statement h2{
  margin:.15rem 0 0;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.15;
}

.purpose-intro__copy{
  columns:2 14rem;
  column-gap:2.5rem;
}

.purpose-intro__copy p{
  break-inside:avoid;
  margin-top:0;
  color:var(--fleece-brown);
}

/* Purpose stories */
.purpose-story{
  --story-color:var(--purpose-fiber);
  display:grid;
  grid-template-columns:minmax(20rem, .96fr) minmax(0, 1.04fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  align-items:center;
}

.purpose-story--breeding{ --story-color:var(--purpose-herd); }
.purpose-story--products{ --story-color:var(--purpose-goods); }

.purpose-story .guide-kicker{
  color:var(--story-color);
}

.purpose-story__media{
  position:relative;
  padding:.75rem 0 0 .75rem;
}

.purpose-story__media::before{
  content:"";
  position:absolute;
  inset:0 .75rem .75rem 0;
  z-index:-1;
  background:color-mix(in srgb, var(--story-color) 14%, white);
  border-left:4px solid var(--story-color);
}

.purpose-story--reverse .purpose-story__media{
  grid-column:2;
  grid-row:1;
  padding:.75rem .75rem 0 0;
}

.purpose-story--reverse .purpose-story__media::before{
  inset:0 0 .75rem .75rem;
  border-right:4px solid var(--story-color);
  border-left:0;
}

.purpose-story--reverse .purpose-story__copy{
  grid-column:1;
  grid-row:1;
}

/* Four work layers */
.purpose-balance{
  padding-block:clamp(2.75rem, 7vw, 5rem);
  border-block:1px solid var(--fleece-beige);
}

.purpose-balance__head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(17rem, .65fr);
  gap:0 5rem;
  align-items:end;
  margin-bottom:2rem;
}

.purpose-balance__head .guide-kicker,
.purpose-balance__head h2{
  grid-column:1;
}

.purpose-balance__head h2{
  margin:.15rem 0 0;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}

.purpose-balance__head > p:last-child{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  color:var(--fleece-brown);
}

.purpose-balance__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1px;
  padding:1px;
  background:var(--fleece-beige);
}

.purpose-balance article{
  --balance-color:var(--purpose-fiber);
  min-height:15rem;
  padding:1.4rem;
  background:var(--fleece-card);
  border-bottom:5px solid var(--balance-color);
}

.purpose-balance article:nth-child(2){ --balance-color:var(--purpose-herd); }
.purpose-balance article:nth-child(3){ --balance-color:var(--purpose-goods); }
.purpose-balance article:nth-child(4){ --balance-color:var(--purpose-learn); }

.purpose-balance article span{
  color:var(--balance-color);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.purpose-balance article h3{
  margin:1rem 0 .65rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.25;
}

.purpose-balance article p{
  margin:0;
  color:var(--fleece-brown);
  font-size:.8rem;
}

/* Visitor section */
.visitor-section{
  display:grid;
  grid-template-columns:minmax(0, 1.03fr) minmax(20rem, .97fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  align-items:center;
  padding:clamp(2rem, 6vw, 4rem);
  background:linear-gradient(120deg, #e4eceb, #eef0e8);
  border:1px solid #ccd9d6;
}

.visitor-section .guide-kicker{
  color:var(--purpose-learn);
}

.visitor-section__media img{
  border-color:#bdceca;
}

/* Agricultural realities */
.reality-section{
  display:grid;
  grid-template-columns:minmax(0, .72fr) minmax(0, 1.28fr);
  gap:clamp(2.5rem, 8vw, 7rem);
  padding-block:clamp(2.75rem, 7vw, 5rem);
  border-block:1px solid var(--fleece-beige);
}

.reality-section__title h2{
  margin:.15rem 0 0;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}

.reality-section__list{
  border-top:1px solid var(--fleece-beige);
}

.reality-section__list > div{
  display:grid;
  grid-template-columns:minmax(10rem, .7fr) minmax(0, 1.3fr);
  gap:2rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--fleece-beige);
}

.reality-section__list strong{
  color:var(--purpose-ink);
  font-family:var(--font-display);
  font-size:1.02rem;
}

.reality-section__list p{
  margin:0;
  color:var(--fleece-brown);
  font-size:.82rem;
}

/* Michigan feature */
.michigan-feature{
  display:grid;
  grid-template-columns:minmax(22rem, 1.08fr) minmax(0, .92fr);
  min-height:30rem;
  background:var(--purpose-ink);
}

.michigan-feature__media{
  margin:0;
}

.michigan-feature__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.michigan-feature__copy{
  align-self:center;
  padding:clamp(2rem, 6vw, 4rem);
  color:#fff;
}

.michigan-feature__copy .guide-kicker{
  color:#d8ba7c;
}

.michigan-feature__copy h2{
  margin:.15rem 0 1rem;
  color:#fff;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}

.michigan-feature__copy p{
  color:rgba(255,255,255,.8);
}

.michigan-feature__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 1.25rem;
  align-items:center;
  margin-top:1.5rem;
}

.michigan-feature__actions a{
  color:#fff;
  font-weight:600;
}

.michigan-feature__primary{
  padding:.8rem 1.1rem;
  color:var(--purpose-ink) !important;
  background:#fff;
  text-decoration:none;
}

.michigan-feature__primary:hover{
  background:#e5dcc9;
}

/* Conclusion */
.purpose-conclusion{
  max-width:58rem;
}

.purpose-conclusion h2{
  margin:.15rem 0 1.25rem;
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4vw, 2.55rem);
  line-height:1.15;
}

.purpose-conclusion__columns{
  columns:2 20rem;
  column-gap:3.5rem;
}

.purpose-conclusion__columns p{
  break-inside:avoid;
  color:var(--fleece-brown);
}

@media (max-width:64rem){
  .purpose-balance__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .purpose-balance article{
    min-height:11rem;
  }
}

@media (max-width:52rem){
  .purpose-hero,
  .purpose-intro,
  .purpose-story,
  .purpose-story--reverse,
  .visitor-section,
  .reality-section,
  .michigan-feature{
    grid-template-columns:1fr;
  }

  .purpose-hero__copy{
    max-width:44rem;
  }

  .purpose-hero__media{
    margin-top:2rem;
  }

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

  .purpose-story--reverse .purpose-story__media,
  .purpose-story--reverse .purpose-story__copy{
    grid-column:1;
    grid-row:auto;
  }

  .purpose-story--reverse .purpose-story__media{
    order:0;
  }

  .purpose-story--reverse .purpose-story__copy{
    order:1;
  }

  .purpose-balance__head{
    grid-template-columns:1fr;
  }

  .purpose-balance__head > p:last-child{
    grid-column:1;
    grid-row:auto;
  }

  .visitor-section__media{
    order:-1;
  }

  .michigan-feature__media img{
    aspect-ratio:16 / 9;
  }
}

@media (max-width:38rem){
  .purpose-hero h1{
    font-size:2.55rem;
  }

  .purpose-hero__key,
  .purpose-balance__grid{
    grid-template-columns:1fr;
  }

  .purpose-balance article{
    min-height:0;
  }

  .reality-section__list > div{
    grid-template-columns:1fr;
    gap:.4rem;
  }

  .michigan-feature{
    width:calc(100% - 2rem);
    margin-inline:1rem;
  }
}