/*
  CarlosSuarezArt — Components
  Small reusable pieces used across multiple pages. Each one should be
  traceable to a Creative Bible section in its comment — if a new
  component can't cite one, reconsider whether it belongs on the site.
*/

/* ===== Section intro (eyebrow + heading + short paragraph) =====
   Bible §10: "what is the one thing this screen wants the visitor to
   look at right now?" — every section opens with exactly one of these. */

.section-intro{
  text-align: center;
  max-width: var(--reading-max);
  margin: 0 auto;
}

.section-intro__eyebrow{
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.section-intro__heading{
  font-family: var(--font-serif);
  font-size: var(--text-heading);
  color: var(--color-black);
  margin-top: var(--space-3);
}

.section-intro__body{
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-gray);
  margin: var(--space-3) auto 0;
}

/* ===== Text link — the site's one interactive/button style (Bible §17).
   Never a filled, colored CTA. A caption inviting a click, not a button
   demanding one. ===== */

.text-link{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border);
  padding-bottom: var(--space-1);
  transition: color 0.4s ease, border-color 0.4s ease;
}

.text-link:hover,
.text-link:focus-visible{
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* ===== Artwork card — image + serif italic title + sans meta line.
   Used in Gallery, Collection detail, and New Works. Wall-label
   metadata only (Bible §29): no philosophy text on a card, ever. ===== */

.artwork-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.artwork-card__frame{
  width: 100%;
  /* 4:5 is a fallback only, for a piece whose real ratio isn't known
     yet. Every real painting sets its own aspect-ratio inline (from
     its actual image dimensions — see artworks-data.js in Phase 2),
     which overrides this by CSS specificity. The painting is never
     cropped to fit a frame the frame is cropped to fit the painting. */
  aspect-ratio: 4 / 5;
  border: 0.5px solid var(--color-border);
  overflow: hidden;
  /* Subtle hover only — opacity/scale, never a shadow (Bible §20). */
}

.artwork-card__frame img{
  width: 100%;
  height: 100%;
  /* Cover is safe here specifically because the frame's aspect-ratio
     is set to match the image's own ratio — there is no mismatch left
     for "cover" to crop. It exists only as a rounding-error safety net. */
  object-fit: cover;
  transition: transform 0.6s var(--ease-gentle);
}

.artwork-card:hover .artwork-card__frame img{
  transform: scale(1.015);
}

.artwork-card__title{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-title);
  color: var(--color-black);
}

.artwork-card__meta{
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* ===== Wall label — the larger, quieter typographic treatment used on
   an individual Artwork page (Bible §14 Art Presentation Philosophy):
   title, year, medium, dimensions. Nothing more required, nothing
   decorative added. ===== */

.wall-label__title{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-heading);
  color: var(--color-black);
}

.wall-label__facts{
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wall-label__facts dl{
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.wall-label__facts dt{ font-weight: 500; }
.wall-label__facts dd{ color: var(--color-black); }

/* Optional first-person reflection (Bible §14) — only rendered in markup
   when real, confirmed text exists. This rule styles it when present;
   it never supplies placeholder content of its own. */
.wall-label__reflection{
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.8;
  color: var(--color-black);
  max-width: var(--reading-max);
}

/* ===== Reserved "Acquire" slot (Bible §16 Future E-commerce Vision) —
   present in every artwork page template, empty and hidden today.
   Not styled beyond a quiet placement reservation until a real
   inquiry/purchase component fills it later. ===== */
.artwork-acquire{
  margin-top: var(--space-6);
}

.artwork-acquire[hidden]{
  display: none;
}

/* ===== New Works band =====
   Deliberately a *different* emotional register from the Collection
   grid below it: recency and momentum, not slow immersion. Smaller,
   tighter, more compact — a quick look at what's newest, not the grand
   staggered "wall" reserved for the wider Collection. Tighter section
   padding reinforces the same distinction (Bible §12: every section's
   rhythm should be considered on its own terms, not inherited). */

.new-works{
  padding: var(--space-6) 0;
}

.new-works__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  max-width: 900px;
}

@media (max-width: 760px){
  .new-works__grid{
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: none;
  }
}