/* ==========================================================================
   MAHIRA SELECT - about.css
   The editorial About page. Loaded only on templates/page-about.php, after
   pages.css, so it wins the cascade there and nowhere else.

   Rhythm: split hero, brand values, our story, craftsmanship banner,
   collections, why choose us, commitment banner, newsletter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Hero
   -------------------------------------------------------------------------- */
.ms-ahero{background:var(--ms-cream);}
.ms-ahero__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,40px);
}
.ms-ahero__body{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,6vh,64px) 0;
}
.ms-ahero__title{
  font-family:var(--ms-font-heading);
  font-size:var(--ms-fs-hero);line-height:1.08;font-weight:500;
  text-transform:uppercase;letter-spacing:.005em;
  margin-bottom:18px;
}
.ms-ahero__title em{font-style:italic;color:var(--ms-gold-ink);}
.ms-ahero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}

.ms-ahero__media{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--ms-champagne);
  border-radius:var(--ms-radius-card);
}
.ms-ahero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

@media (min-width:900px){
  .ms-ahero__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:stretch;gap:clamp(40px,5vw,72px);
    min-height:clamp(460px,56vh,600px);
  }
  .ms-ahero__body{padding-block:clamp(48px,7vh,80px);}
  .ms-ahero__media{aspect-ratio:auto;padding-block:clamp(24px,4vh,40px) 0;}
}

@media (max-width:420px){
  .ms-ahero__actions{flex-direction:column;align-items:stretch;}
  .ms-ahero__actions .ms-btn{width:100%;}
}

/* --------------------------------------------------------------------------
   02. Brand values strip
   -------------------------------------------------------------------------- */
.ms-avalues{
  padding-block:clamp(36px,4.4vw,56px);
  margin-top:clamp(28px,4vh,48px);
  border-top:var(--ms-hairline);border-bottom:var(--ms-hairline);
}
.ms-avalues__row{
  display:grid;gap:clamp(24px,3vw,36px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:860px){ .ms-avalues__row{grid-template-columns:repeat(4,minmax(0,1fr));} }
.ms-avalues__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.ms-avalues__icon{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ms-gold-line);background:var(--ms-gold-soft);color:var(--ms-earth);
  margin-bottom:4px;
}
.ms-avalues__title{
  font-family:var(--ms-font-body);
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  color:var(--ms-ink);margin:0;line-height:1.35;
}
.ms-avalues__copy{font-size:.8125rem;color:var(--ms-muted);max-width:24ch;line-height:1.55;}

/* --------------------------------------------------------------------------
   03. Our story
   -------------------------------------------------------------------------- */
.ms-astory{padding-block:clamp(56px,7vw,96px);}
.ms-astory__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);}
@media (min-width:900px){
  .ms-astory__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;}
}

.ms-astory__gallery{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
  margin:0 calc(var(--ms-gutter) * -1);
  padding-inline:var(--ms-gutter);
}
.ms-astory__cell{
  position:relative;overflow:hidden;flex:0 0 auto;margin:0;
  width:76vw;max-width:340px;aspect-ratio:4/5;
  border-radius:var(--ms-radius-card);background:var(--ms-sand);
  scroll-snap-align:start;
}
.ms-astory__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

@media (min-width:900px){
  .ms-astory__gallery{
    display:grid;overflow:visible;margin:0;padding-inline:0;
    grid-template-columns:1.1fr .9fr;grid-template-rows:1fr 1fr;
    gap:16px;height:clamp(420px,40vw,540px);
  }
  .ms-astory__cell{width:auto;max-width:none;aspect-ratio:auto;}
  .ms-astory__cell--1{grid-column:1;grid-row:1 / 3;}
  .ms-astory__cell--2{grid-column:2;grid-row:1;}
  .ms-astory__cell--3{grid-column:2;grid-row:2;}
}

.ms-astory__body{display:flex;flex-direction:column;align-items:flex-start;}
.ms-astory__body p{color:var(--ms-muted);max-width:58ch;}
.ms-astory__body .ms-lead{color:var(--ms-ink);}
.ms-astory__cta{margin-top:clamp(20px,2.6vw,28px);}

/* --------------------------------------------------------------------------
   04. Craftsmanship banner
   -------------------------------------------------------------------------- */
.ms-aphil,.ms-acommit{
  position:relative;overflow:hidden;isolation:isolate;
  color:var(--ms-cream);
  padding-block:clamp(64px,9vw,116px);
}
.ms-aphil__media,.ms-acommit__media{position:absolute;inset:0;z-index:-2;background:var(--ms-ink);}
.ms-aphil__img,.ms-acommit__img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-aphil::after,.ms-acommit::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.58) 52%,rgba(13,13,13,.3) 100%);
}
.ms-aphil__body,.ms-acommit__body{max-width:600px;}
.ms-aphil__body h2,.ms-acommit__body h2{color:var(--ms-cream);text-transform:uppercase;letter-spacing:.02em;line-height:1.14;}
.ms-aphil__body .ms-lead,.ms-acommit__body .ms-lead{color:rgba(245,242,234,.8);margin-bottom:clamp(20px,2.6vw,30px);}

/* --------------------------------------------------------------------------
   05. Collections

   Nothing here any more. The page runs the shared "Explore the collection"
   section, whose rules live in base.css because this page does not load
   home.css and the two surfaces must render identically.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   06. Why choose Mahira Select
   -------------------------------------------------------------------------- */
.ms-awhy{padding-block:clamp(56px,7vw,96px);background:var(--ms-sand);}
.ms-awhy__row{
  display:grid;gap:clamp(28px,3.2vw,40px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){ .ms-awhy__row{grid-template-columns:repeat(4,minmax(0,1fr));} }
.ms-awhy__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.ms-awhy__icon{
  width:clamp(64px,5.2vw,78px);height:clamp(64px,5.2vw,78px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ms-gold-line);color:var(--ms-earth);
  background:var(--ms-gold-soft);
  margin-bottom:6px;
}
.ms-awhy__title{
  font-family:var(--ms-font-body);
  font-size:clamp(.9375rem,.88rem + .3vw,1.125rem);
  font-weight:600;letter-spacing:.01em;
  color:var(--ms-ink);margin:0;line-height:1.35;
}
.ms-awhy__copy{
  font-size:clamp(.875rem,.83rem + .22vw,1rem);
  color:var(--ms-muted);max-width:26ch;line-height:1.6;
}

/* --------------------------------------------------------------------------
   07. Newsletter
   Same component and markup as the homepage (parts/sections/newsletter.php);
   home.css is not loaded on this template, so its rules are restated here.
   -------------------------------------------------------------------------- */
.ms-news{background:var(--ms-ink);}
.ms-news__inner{text-align:center;}
.ms-news__inner .ms-h2{color:var(--ms-cream);text-transform:uppercase;letter-spacing:.02em;}
.ms-news__inner .ms-lead{margin-inline:auto;color:rgba(245,242,234,.72);}
.ms-news__form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin:28px auto 0;}
.ms-news__form input[type='email']{
  flex:1 1 240px;min-width:0;
  background:transparent;border-color:rgba(245,242,234,.32);color:var(--ms-cream);
}
.ms-news__form input[type='email']::placeholder{color:rgba(245,242,234,.5);}
.ms-news__form input[type='email']:focus{border-color:var(--ms-gold);}
.ms-news__form .ms-btn{background:var(--ms-gold);color:var(--ms-ink);border-color:var(--ms-gold);}
.ms-news__form .ms-btn:hover{background:var(--ms-cream);border-color:var(--ms-cream);}
@media (max-width:560px){
  /* Once the field and button no longer sit on one line, the button spans the row. */
  .ms-news__form .ms-btn{flex:1 1 100%;}
}
.ms-news__ok,.ms-news__err{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  margin:24px auto 0;font-size:var(--ms-fs-sm);
}
.ms-news__ok{color:var(--ms-gold);}
.ms-news__err{color:var(--ms-sale-light);}