/* ═══════════════════════════════════════════════════════════════
   ABOUT US — PAGE-SPECIFIC STYLES
   Reuses every color, font, spacing unit, radius and shadow already
   defined in style.css, plus the homepage's own .en-story and
   .en-why sections verbatim. Section padding matches every other
   page exactly: 60px top/bottom, var(--gutter) left/right.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   ABOUT HERO
   Same treatment as every other page hero:
   full-bleed image, dark overlay, slow zoom, fade-up title.
═══════════════════════════════════════ */
.ab-hero {
  position: relative;
  min-height: clamp(340px, 46vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ab-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ab-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: en-hero-zoom 14s ease-out both;
}

.ab-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,20,0.42) 0%, rgba(10,12,20,0.62) 100%);
}

.ab-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 160px) var(--gutter) 60px;
  text-align: center;
}

.ab-hero-title {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 60px);
  color: var(--white);
  line-height: 1.1;
}

/* ═══════════════════════════════════════
   THE VISION + QUOTE
   Same section padding rhythm as every other section (60px 0,
   var(--gutter) left/right), alternating background like the
   homepage does between story/why/gallery.
═══════════════════════════════════════ */
.ab-vision {
  background: var(--cream-2);
  padding: 60px 0;
}

.ab-vision-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.ab-vision-text .en-story-body { margin-bottom: 0; }

.ab-quote {
  position: relative;
  border-left: 3px solid var(--gold);
  padding-left: 40px;
  margin: 0;
}

.ab-quote-mark {
  position: absolute;
  top: -34px;
  left: 6px;
  font-family: Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  pointer-events: none;
}

.ab-quote p {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
  position: relative;
  z-index: 1;
}

.ab-quote p em {
  color: var(--gold-dark);
  font-style: italic;
}

/* ═══════════════════════════════════════
   SIX QUIET REASONS
   Reuses .en-why / .en-why-card / .en-why-grid / .en-why-item
   from style.css completely as-is — no padding override needed
   here, .en-why already applies the correct 60px/var(--gutter)
   rhythm. (An earlier override on .ab-reasons accidentally zeroed
   out the left/right gutter — removed.)
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   A DAY IN THE MOUNTAINS
═══════════════════════════════════════ */
.ab-day {
  background: var(--cream-2);
  padding: 60px 0;
}

.ab-day-header {
  max-width: 1400px;
  margin: 0 auto 36px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.ab-day-header .en-label-gold { margin-bottom: 10px; }

.ab-day-heading {
  margin-bottom: 0;
  font-size: 36px;
}

.ab-day-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.ab-day-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--white);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.ab-day-arrow:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
  transform: translateY(-2px);
}

/* .ab-day-strip {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, calc(25% - 15px));
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ab-day-strip::-webkit-scrollbar { display: none; } */

.ab-day-strip{
    max-width:1400px;
    margin:0 auto;
    padding:0 var(--gutter);

    display:flex;
    flex-wrap:nowrap;

    gap:20px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.ab-day-strip::-webkit-scrollbar{
    display:none;
}

/* .ab-day-item {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
} */

.ab-day-item{
    position:relative;
    flex:0 0 calc((100% - 60px)/4);   /* 4 cards */
    min-width:280px;

    aspect-ratio:3/4;

    border-radius:12px;
    overflow:hidden;
    margin:0;
}

.ab-day-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}

.ab-day-item:hover img {
  transform: scale(1.05);
}

.ab-day-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

.ab-day-item figcaption {
     position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    font-family: Georgia, serif;
    font-size: 21px;
    font-weight: 500;
    color: var(--white);
}

/* ═══════════════════════════════════════
   UNIQUE FEATURES
   Same visual language as "Six Quiet Reasons" (white card,
   20px radius, divided item grid, floating gold icon circle)
   sized for four items instead of six. Padding follows the
   exact same rhythm as .en-why: 60px top/bottom on the section,
   var(--gutter) left/right — no separate override here, learned
   from the .ab-reasons mistake above.
═══════════════════════════════════════ */
.ab-features {
  background: var(--cream-1);
  padding: 60px var(--gutter) 60px;
}

.ab-features-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 20px 50px rgba(30,20,10,0.06);
}

.ab-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ab-features-item {
  padding: 44px 36px 40px;
  border-right: 1px solid rgba(0,0,0,0.07);
}

.ab-features-item:last-child {
  border-right: none;
}

.ab-features-item:hover .en-why-icon {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.06);
  background: #C99A2E;
}

.ab-features-item:hover .en-why-icon svg { color: var(--white); }

.ab-features-item h3 {
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--charcoal);
  margin-bottom: 10px;
}

.ab-features-item p {
  font-family: 'Mulish', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--mid-gray);
}

@media (max-width: 900px) {
  .ab-features-grid { grid-template-columns: 1fr 1fr; }
  .ab-features-item:nth-child(2n) { border-right: none; }
  .ab-features-item:nth-child(1),
  .ab-features-item:nth-child(2) { border-bottom: 1px solid rgba(0,0,0,0.07); }
  .ab-day-item{flex:0 0 40%;}

}

@media (max-width: 600px) {
  .ab-features-grid { grid-template-columns: 1fr; }
  .ab-features-item { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
  .ab-features-item:last-child { border-bottom: none !important; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — ABOUT PAGE
   Same breakpoint scale as the rest of the site.
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .ab-vision-grid { gap: 56px; }
  .ab-quote p { font-size: 25px; }
}

@media (max-width: 992px) {
  .ab-vision-grid { grid-template-columns: 1fr; gap: 40px; }

  .ab-day-strip { grid-auto-columns: minmax(220px, 42vw); }
}

@media (max-width: 768px) {
  .ab-hero-inner { padding-top: 120px; }
  .ab-day-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ab-day-heading { font-size: 30px; }
  .ab-quote { padding-left: 28px; }
  .ab-quote-mark { font-size: 70px; top: -24px; }
  .ab-quote p { font-size: 22px; }
  .ab-day-item{flex:0 0 75%;}
}

@media (max-width: 576px) {
  .ab-day-strip { grid-auto-columns: minmax(200px, 78vw); }
  .ab-day-item { aspect-ratio: 3 / 4; }
  .ab-day-item{flex:0 0 85%;}
}

@media (max-width: 430px) {
  .ab-hero-title { font-size: clamp(32px, 10vw, 44px); }
  .ab-quote p { font-size: 20px; }
}