/* Styles for a-propos (About) page */
:root{
  --accent:#bca98a;
  --bg:#fbf9f7;
  --text:#231c17;
  --muted:#6b6360;
}

body:has(.about-page) {
  background: var(--bg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

html:has(.about-page) {
  background: var(--bg) !important;
}

.about-page{background:var(--bg); color:var(--text); min-height:100vh;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}

/* Hero */
.about-hero{padding:80px 0 40px;text-align:center;background:transparent;}
.about-hero .eyebrow{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:0.9rem;text-transform:uppercase;margin-bottom:8px;}
.about-hero h1{font-family:'Playfair Display', serif;font-size:3rem;margin:6px 0;color:var(--text);}
.about-hero .lead{color:var(--muted);max-width:880px;margin:0 auto;font-size:1.05rem;line-height:1.6;}

/* Content grid */
.about-content{padding:32px 0 60px;}
.about-grid{display:grid;grid-template-columns:1fr 640px;gap:32px;align-items:start;}

/* Higher-specificity overrides to beat rules in collection.css when both are loaded */
.about-content .about-grid{grid-template-columns:1fr 640px;}

.about-text h2{font-family:'Playfair Display', serif;font-size:1.6rem;margin-bottom:8px;}
.about-text p{color:var(--muted);line-height:1.7;margin-bottom:12px;}
.values-list{list-style:none;padding:0;margin:8px 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.values-list li{background:#fff;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.04);font-size:0.95rem;color:#333}
.muted{color:var(--muted)}

/* Gallery - mosaic */
.about-gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:260px;gap:16px;align-items:stretch}

/* override collection.css .about-gallery (more specific) */
.about-content .about-gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:260px;gap:16px;align-items:stretch}
.gallery-item{position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(0,0,0,0.04);background:#fff;display:block}
.gallery-item.large{grid-row:span 2}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:#fff;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);font-size:0.95rem}

/* CTA */
.about-cta{margin-top:28px;text-align:center;padding:20px}
.cta-text{max-width:760px;margin:0 auto;color:var(--muted);margin-bottom:12px}
.hero-btn{display:inline-block;background:var(--text);color:#f5e8d6;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600}
.hero-btn:hover{opacity:0.95}

/* Responsive */
@media (max-width:992px){
  .about-grid{grid-template-columns:1fr;}
  /* on medium screens keep a compact 2-col layout but slightly larger rows */
  .about-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gallery-item.large{grid-row:span 2}
  .gallery-item img{height:100%}
  .about-hero h1{font-size:2rem}
}
@media (max-width:640px){
  /* Keep a two-column mosaic on most mobile devices so users see more items at once */
  .about-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:160px;gap:12px;justify-items:center;justify-content:center;max-width:720px;margin:0 auto}
  /* Make the first two tiles visually larger on mobile by spanning two rows */
  .gallery-item{grid-row:auto !important}
  .gallery-item.large{grid-row:span 2 !important}
  .about-gallery > .gallery-item:nth-child(2){grid-row:span 2 !important}

  /* If the gallery has an odd number of items, center the last one under the two above */
  .about-gallery > .gallery-item:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1 !important; /* occupy full row */
    justify-self: center !important; /* center horizontally */
    width: calc(50% - 6px) !important; /* visually equal to one column (account for gap) */
    max-width: 420px !important;
  }
  /* keep images filling their cells */
  .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }
  /* ensure each gallery item centers inside its grid cell and fills available width */
  .about-gallery .gallery-item, .about-content .about-gallery .gallery-item { justify-self: center; width: 100%; }
  /* slightly lighter shadows on mobile */
  .gallery-item { box-shadow: 0 8px 18px rgba(0,0,0,0.06); }
  .values-list{grid-template-columns:1fr}
  .about-hero{padding:48px 0}
}

/* Strong override: force exactly 2 columns (50% / 50%) on narrow and mobile views
   Prevent unexpected 3-column layouts coming from other stylesheets. */
@media (max-width:900px) {
  .about-gallery, .about-content .about-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    /* keep a modest row height so spanned tiles are larger but not huge */
    grid-auto-rows: 160px !important;
    width: 100% !important;
  }
  .about-gallery .gallery-item, .about-content .about-gallery .gallery-item {
    width: 100% !important;
    min-width: 0 !important;
    grid-row: auto !important;
  }
}

/* For very narrow phones, fall back to a single column for readability */
@media (max-width:360px){
  .about-gallery{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .gallery-item{grid-row:auto !important}
  .gallery-item.large{grid-row:auto !important}
  .gallery-item { aspect-ratio: 3 / 4; border-radius:12px; overflow:hidden; }
  .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }
}