/* ============================================================
   Caterati — Portrait Overlay

   The client-story pop-up. Extracted from css/customs.css because
   two pages open it now: the Customs gallery, where a portrait on
   the villa wall is clicked, and the landing page, where a client
   card is. The base .overlay / .overlay-close live in styles.css.
   ============================================================ */

/* ============================================================
   Portrait Overlay Widget (PRD §3.1.3, OQ-02: full-screen takeover)
   ============================================================ */
.ov-panel {
  width: min(920px, 100%);
  background: var(--cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Centred in the viewport by auto margins rather than by the overlay's
     align-items. The distinction matters once a portrait's story makes the
     panel taller than the screen: `align-items: center` would push its top
     above the scroll container, out of reach, whereas auto margins collapse to
     zero exactly when the free space runs out — centred when it fits, scrolled
     from the top when it doesn't. */
  margin: auto;
}
.ov-grid { display: grid; grid-template-columns: 320px 1fr; }
@media (max-width: 720px){ .ov-grid { grid-template-columns: 1fr; } }

/* The portrait hangs against the dusk photograph rather than a flat teal
   ground. Deep Cypress sits underneath as the fallback: it is what shows if
   the image is slow or missing, and it is close enough to the picture's own
   sky that nothing jumps when the photograph arrives. */
.ov-hero {
  background:
    /* Scrim first, so it lies over the photograph: the painting credit sits at
       the foot of the panel in 66% white, and how bright the sky is behind it
       depends on where `cover` happens to crop — which changes with the length
       of the story beside it. The gradient is clear across the top half. */
    linear-gradient(180deg, rgba(7, 40, 49, 0) 46%, rgba(7, 40, 49, 0.62) 100%),
    url("../custom_portrait_background2.png") center / cover no-repeat,
    var(--cypress);
  margin: 0;                 /* it is a <figure> — drop the UA default margin */
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.ov-hero svg,
.ov-hero .portrait-art { border-radius: var(--radius); box-shadow: 0 14px 30px rgba(0,0,0,0.10); }
/* In the overlay the portrait is shown whole, at its own proportions. */
.ov-hero .portrait-art { display: block; width: 300px; max-width: 100%; height: auto; }

/* Painting credit, sitting under the portrait like a gallery wall label. */
.ov-citation {
  max-width: 300px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  text-align: left;
}
.ov-citation-lead {
  display: block;
  color: rgba(253, 252, 250, 0.92);
  font-style: italic;
  margin-bottom: 3px;
}
.ov-citation-text { display: block; overflow-wrap: anywhere; }  /* long URLs must not overflow */
.ov-citation a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ov-citation a:hover { color: var(--white); }

.ov-body { padding: var(--space-6); }
.ov-body h2 { margin-bottom: var(--space-2); }
.ov-meta { color: var(--muted); font-size: var(--fs-body-sm); margin-bottom: var(--space-5); }
.ov-section-title {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: var(--track-support);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--gold);
  margin: var(--space-5) 0 var(--space-2);
}
.ov-story { margin: 0 0 8px; }
.ov-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.ov-media .m {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Photographs of the piece. The commission shots are all portrait — the worn
   shot in particular carries the earring low in the frame, which a landscape
   tile would crop away — so the tile takes a 3:4 frame and fills it. */
.ov-media .m img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Under the portrait and its credit, in the hero column. .ov-hero is a centred
   flex column with a 16px gap, so this only adds the extra step that separates
   an action from the caption above it. Full width of the credit block, so the
   button lines up with the text rather than floating inside it. */
.ov-cta { margin-top: var(--space-2); width: 100%; max-width: 300px; }
.ov-cta .btn { display: block; width: 100%; }

.ov-testimonial {
  border-left: 3px solid var(--gold);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-family: var(--display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--navy);
  margin-top: 8px;
}
/* A letter rather than a pull-quote.
   Paragraphs only appear when the record gives the testimonial as an array,
   so this styles the long form without touching the short one: six paragraphs
   at pull-quote size is a wall, and nobody reads to the end of it. The rule
   down the left still says it is a quotation. */
.ov-testimonial p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.ov-testimonial p:last-child { margin-bottom: 0; }