/* =====================================================================
   Francisco Quintana Arte — page components (v2)
   loads after styles.css
   ===================================================================== */

/* small white spacer between hero and first section (home) */
.spacer{background:var(--paper);height:clamp(2.5rem,6vw,5rem)}

/* ---------- INTRO STRIP (home) ---------- */
.introbar{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.introbar__grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;
  padding-block:clamp(3rem,6vw,5.5rem)}
.introbar .overline{display:block;margin-bottom:1rem}
.introbar__statement{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.18;max-width:24ch}
.introbar__statement em{font-style:italic;color:var(--accent)}
.introbar__meta{color:var(--muted);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  white-space:nowrap}

/* ---------- SERVICE CARDS WITH IMAGE (home) ---------- */
.svc{background:var(--paper-2)}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.5vw,2.6rem)}
.svc-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-soft);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc-card__media{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--paper-3)}
.svc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.svc-card:hover .svc-card__media img{transform:scale(1.06)}
.svc-card__idx{position:absolute;top:1rem;left:1.2rem;z-index:2;color:var(--white);
  font-family:var(--serif);font-size:1.05rem;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.svc-card__body{padding:clamp(1.8rem,2.5vw,2.6rem);display:flex;flex-direction:column;flex:1}
.svc-card__title{font-size:clamp(1.5rem,2.2vw,1.95rem);font-weight:400;margin-bottom:1rem;line-height:1.1}
.svc-card__text{color:var(--ink-soft);font-size:.97rem;line-height:1.7;margin-bottom:1.8rem;flex:1}

/* ---------- PAGE HEAD (inner pages) ---------- */
.pagehead{padding-top:clamp(8.5rem,15vw,13rem);padding-bottom:clamp(2.8rem,5vw,4.5rem);
  border-bottom:1px solid var(--line)}
.pagehead .overline{display:block;margin-bottom:1.2rem}
.pagehead__title{font-size:clamp(2.6rem,8vw,5.6rem);font-weight:300;letter-spacing:.01em}
.pagehead__lead{margin-top:1.8rem;max-width:62ch;color:var(--ink-soft);
  font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.72}
.pagehead__lead a{color:var(--accent);border-bottom:1px solid var(--line);transition:.3s var(--ease)}
.pagehead__lead a:hover{border-color:var(--accent)}

/* ---------- PROSE BLOCKS (curatorships / appraisals) ---------- */
.block{display:grid;grid-template-columns:minmax(0,9rem) 1fr;gap:clamp(1.5rem,5vw,5rem);
  padding-block:clamp(2.8rem,5vw,4.2rem);border-top:1px solid var(--line);align-items:start}
.block:first-of-type{border-top:none;padding-top:0}
.block__index{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--accent);line-height:1}
.block__label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-top:.6rem}
.block__body h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:400;margin-bottom:1.2rem}
.block__body p{color:var(--ink-soft);font-size:1.06rem;line-height:1.85;max-width:64ch}

/* ---------- SERVICE ROWS (servicios: alternating image + text) ---------- */
.svc-rows{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.svc-row__media .frame{aspect-ratio:4/3}
.svc-row--flip .svc-row__media{order:2}
.svc-row__body .block__index{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:300;color:var(--accent);line-height:1;margin-bottom:.7rem}
.svc-row__body h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;margin-bottom:1rem}
.svc-row__body p{color:var(--ink-soft);font-size:1.04rem;line-height:1.8;max-width:46ch}
@media(max-width:820px){.svc-row{grid-template-columns:1fr;gap:1.4rem}.svc-row__media{order:-1!important}}

/* ---------- ABOUT SPLIT (quiénes somos) ---------- */
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about__media{position:relative}
.about__media .frame{aspect-ratio:4/5}
.about__media figcaption{margin-top:1rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.about__bio{color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.86}
.about__bio .overline{display:block;margin-bottom:1.6rem}
.about__bio p::first-letter{font-family:var(--serif);float:left;font-size:4.6rem;line-height:.74;
  padding:.16em .14em 0 0;color:var(--accent);font-weight:400}

/* ---------- ARTISTS WALL (commercialization / representation) ---------- */
.artists__grid{columns:2;column-gap:clamp(2rem,4vw,4rem);max-width:700px}
.artists__grid a{transition:color .25s var(--ease)}
.artists__grid a:hover{color:var(--accent)}
.com-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.com-intro__media{margin-top:clamp(1.5rem,4vw,3rem)}
@media(max-width:820px){.com-intro{grid-template-columns:1fr;gap:2rem}.com-intro__media{order:-1;margin-top:0}}
.artists__grid li{break-inside:avoid;list-style:none;padding:.28rem 0;
  font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.3;
  color:var(--ink)}
.artists__more{margin-top:2.6rem;font-style:italic;color:var(--muted);font-family:var(--serif);font-size:1.2rem}
.artists__grid--bare{columns:2;border-top:none;padding-top:0}
.artists__grid--bare li{font-size:clamp(1rem,1.3vw,1.2rem);border-bottom-color:var(--line-soft)}

/* ---------- IMAGE GALLERIES ---------- */
.gallery{display:grid;gap:clamp(1rem,1.6vw,1.5rem)}
.gallery--3{grid-template-columns:repeat(3,1fr)}
.gallery--4{grid-template-columns:repeat(4,1fr)}
.gallery--feature{grid-template-columns:repeat(6,1fr)}
.gallery__item{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3;box-shadow:var(--shadow)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery__item:hover img{transform:scale(1.05)}
.gallery--feature .span2{grid-column:span 2}.gallery--feature .span3{grid-column:span 3}
.gallery--feature .span4{grid-column:span 4}.gallery--feature .tall{aspect-ratio:3/4}
.gallery__item--portrait{aspect-ratio:3/4}

/* ---------- MEDIA ROW (quiénes somos: photos + video, equal height) ---------- */
.media-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.4rem)}
.media-row__item{height:clamp(170px,20vw,250px);overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow)}
.media-row__item img,.media-row__item iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
@media(max-width:760px){.media-row{grid-template-columns:1fr}.media-row__item{height:clamp(200px,56vw,300px)}}

/* hero artwork feature (commercialization) */
.spotlight{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.spotlight .frame{aspect-ratio:3/2}
.spotlight__cap .overline{display:block;margin-bottom:1rem}
.spotlight__cap p{color:var(--ink-soft);font-size:1.05rem;line-height:1.8;max-width:40ch}

/* ---------- LOGO WALL (clients) ---------- */
.logowall{background:var(--paper)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft)}
.logos__cell{background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:clamp(1.8rem,3vw,3rem);aspect-ratio:3/2;transition:background .4s var(--ease)}
.logos__cell:hover{background:var(--paper-2)}
.logos__cell img{max-height:74px;max-width:78%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .5s var(--ease),opacity .5s var(--ease)}
.logos__cell:hover img{filter:grayscale(0);opacity:1}

/* section title (overline + heading) */
.section__title{margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.section__title:has(+ .artists__grid){margin-bottom:clamp(.5rem,1.5vw,1rem)}
.section__title .overline{display:block;margin-bottom:.9rem}
.section__title h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:300}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .svc-cards{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .about{grid-template-columns:1fr;gap:2.5rem}
  .about__media .frame{aspect-ratio:4/3}
  .spotlight{grid-template-columns:1fr}
  .gallery--feature .span2,.gallery--feature .span3,.gallery--feature .span4{grid-column:span 3}
}
@media (max-width:900px){
  .artists__grid{columns:2}
  .block{grid-template-columns:1fr;gap:1rem}
  .gallery--3,.gallery--4{grid-template-columns:repeat(2,1fr)}
  .logos{grid-template-columns:repeat(3,1fr)}
  .introbar__grid{grid-template-columns:1fr;gap:1.6rem}
  .introbar__meta{white-space:normal}
}
@media (max-width:560px){
  .artists__grid{columns:1}
  .gallery--feature{grid-template-columns:1fr}
  .gallery--feature .span2,.gallery--feature .span3,.gallery--feature .span4{grid-column:span 1}
  .logos{grid-template-columns:repeat(2,1fr)}
}