/*
 * ---------------------------------------------------------------------------
 * Version:        0.1.0
 * Last edited by: Manara Studio
 * Date:           2026-09-14
 * Status:         Testing
 * Purpose:        Page layout for /about/ (about-*), /pricing/ (catalog-*) and /gallery/ (gal-*).
 *                 Loaded after base.css on the about, pricing and gallery views (inc/assets.php).
 * Changelog:
 *   0.1.0  2026-09-14  Manara Studio  First build.
 * Maintainer notes:
 *   - Only about-, catalog- and gal- classes, plus layout of shared components (.rows/.row,
 *     .chip, .cta-row, .display) INSIDE those blocks. Shared components live in base.css.
 *   - Tokens only (base.css): --s-*, --rule, --meta, --header-h, --ease, --cream, --ground.
 *     No new colours, 0px corners, 1px hairlines, no shadows, no gradients, no clamp().
 *   - Type sizes stay on the ladder 12/14/16/20/28/40/64/104, stepped at 600 and 1024px.
 *   - No ancestor of the sticky owner photo may set overflow, or sticky stops working.
 * ---------------------------------------------------------------------------
 */

/* ========================================================================
   ABOUT
   ======================================================================== */

/* 1. hero: text only, the H1 is the desktop LCP element */
.about-hero { padding-block: var(--s-6) var(--s-8); }
.about-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.about-hero__grid > * { min-width: 0; }
.about-hero__aside .cta-row { margin-top: var(--s-5); }
@media (max-width: 599px) {
  .about-hero__aside .sub { font-size: 16px; line-height: 1.55; }
}
@media (min-width: 600px) {
  .about-hero { padding-block: var(--s-8) var(--s-9); }
  .about-hero__grid { gap: var(--s-6); }
  .about-hero__aside { max-width: 560px; }
}
@media (min-width: 1024px) {
  /* fills the window (no upper cap) so the owner photo never enters the first screen */
  .about-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(640px, calc(100vh - var(--header-h) - var(--s-7)));
    min-height: max(640px, calc(100svh - var(--header-h) - var(--s-7)));
    padding-block: var(--s-9);
  }
  .about-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-8); row-gap: var(--s-7); align-items: end; }
  .about-hero__aside { max-width: none; }
  .about-hero__aside .cta-row { margin-top: var(--s-6); }
}
/* 104px H1 needs more than eight columns below 1280px: it spans, the offer keeps the right four */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about-hero .display { grid-column: 1 / -1; }
  .about-hero__aside { grid-column: 2; }
}

/* 2. owner + story */
.about-owner__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.about-owner__grid > * { min-width: 0; }
.about-owner__photo { width: 100%; max-width: 480px; }
.about-owner__photo--empty { display: grid; place-items: center; padding: var(--s-5); border: 1px dashed currentColor; background: transparent; }
.about-owner__facts { display: grid; gap: var(--s-1); margin-top: var(--s-5); }
.about-owner__story { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
/* the owner writes this in the page editor: keep her markup readable on the ladder */
.about-owner__story > * + * { margin-top: 1em; }
.about-owner__story h2,
.about-owner__story h3,
.about-owner__story h4 { margin-top: var(--s-6); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.005em; }
.about-owner__story ul,
.about-owner__story ol { padding-left: 1.25em; }
.about-owner__story li + li { margin-top: var(--s-2); }
.about-owner__story a { text-decoration: underline; }
.about-owner__story img { height: auto; }
.about-owner__story figure { margin-block: var(--s-6); }
.about-owner__story figcaption { padding-top: 10px; color: var(--meta); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.about-owner__story blockquote { margin: var(--s-6) 0; padding-block: var(--s-5); border-block: 1px solid var(--rule); font-size: 20px; font-weight: 300; line-height: 1.4; }
@media (min-width: 1024px) {
  .about-owner__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
  .about-owner__grid--solo { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .about-owner__photo { max-width: none; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .about-owner__story blockquote { font-size: 28px; line-height: 1.3; }
}

/* 3. standards: headed statements, no ordinals (DESIGN.md pending decisions) */
.about-standards__list { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.about-standard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.about-standard > * { min-width: 0; }
@media (min-width: 768px) {
  .about-standard { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: baseline; padding: var(--s-6) 0; }
  .about-standard > .title { grid-column: 1 / span 5; }
  .about-standard > .body { grid-column: 7 / span 6; grid-row: 1; }
}
@media (min-width: 1024px) {
  .about-standards__list { margin-top: var(--s-8); }
}

/* 4. proof rows: statement left, link right (no ordinal, no price column) */
.about-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.about-proof__grid > * { min-width: 0; }
.about-proof .row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: center; }
.about-proof .row__name { grid-column: 1; grid-row: 1; min-width: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.about-proof .row .link-arrow,
.about-proof .row .ph { grid-column: 2; grid-row: 1; justify-self: end; }
@media (min-width: 600px) {
  .about-proof .row__name { font-size: 20px; font-weight: 400; }
}
@media (min-width: 1024px) {
  .about-proof__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
}

/* 5. closing CTA */
.about-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.about-cta__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .about-cta__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
}

/* ========================================================================
   PRICING (branch -> pricing catalogue)
   ======================================================================== */

/* 1. hero */
.catalog-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.catalog-hero__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .catalog-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
}

/* 2. branch rows: ordinal | branch | actions */
.catalog-branches { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.catalog-branch {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0 var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.catalog-branch > .ordinal { grid-column: 1; grid-row: 1; }
.catalog-branch__main { grid-column: 2; grid-row: 1; min-width: 0; }
.catalog-branch__main .title + .meta { margin-top: var(--s-3); }
.catalog-branch__main .meta + .meta { margin-top: 2px; }
.catalog-branch__status { margin-top: var(--s-4); }
.catalog-branch__actions { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.catalog-branch__actions .btn-line { max-width: 100%; }
.catalog-list__empty { margin-top: var(--s-6); }
@media (min-width: 768px) {
  .catalog-branch { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: var(--s-6); padding: var(--s-6) 0; }
  .catalog-branch__actions { grid-column: 3; grid-row: 1; align-self: start; align-items: flex-end; text-align: right; }
}
@media (min-width: 1024px) {
  .catalog-branches { margin-top: var(--s-8); }
}

/* 3. official prices note */
.catalog-note__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.catalog-note__grid > * { min-width: 0; }
.catalog-note__text .link-arrow { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .catalog-note__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: end; }
}

/* ========================================================================
   GALLERY
   ======================================================================== */

/* 1. hero + anchor chips */
.gal-hero .sub { margin-top: var(--s-5); }
.gal-nav { margin-top: var(--s-6); }
.gal-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
/* chips become links here: 44px touch target, hover fill with a focus equivalent */
.gal-nav .chip {
  min-height: 44px;
  padding: 0 var(--s-4);
  color: inherit;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.gal-nav .chip:hover,
.gal-nav .chip:focus-visible { background: var(--cream); color: var(--ground); border-color: var(--cream); }
@media (min-width: 1024px) {
  .gal-nav { margin-top: var(--s-7); }
}

/* 2. one section per service / branch */
.gal-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.gal-section__title { display: flex; align-items: baseline; gap: var(--s-4); min-width: 0; }
.gal-section__title > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.gal-grid > li { min-width: 0; }
.gal-item .caption { color: var(--meta); }
.gal-empty .ph { display: inline-block; }
@media (min-width: 600px) {
  .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
}
@media (min-width: 1024px) {
  .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-7); }
}

/* ========================================================================
   MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gal-nav .chip { transition: none; }
}