/* =========================================================
   HOME
   Estilos utilizados por la portada y por sus secciones.
   ========================================================= */

/* 01) BASE EDITORIAL DE LA PORTADA ------------------------ */

/* La base editorial, el contenedor y el enlace de salto se cargan desde los módulos compartidos. */

/* Contenedor común de la portada. */

/* Enlace accesible que solo aparece al recibir el foco. */

/* 02) PORTADA Y VÍDEO ------------------------------------ */

/* 03) RÓTULOS, TEXTOS Y BOTONES --------------------------- */

/* 04) MARCOS Y MARCADORES EDITORIALES -------------------- */

/* 05) SECCIONES DE LA PORTADA ----------------------------- */

/* 06) ESTRUCTURA EXCLUSIVA DE ABOUT ---------------------- */

.placeholder-landscape { aspect-ratio: 16 / 10; }
.about-page .portrait-media { width: min(100%, 27rem); margin-inline: auto; }
.about-page .portrait-media .editorial-placeholder { width: 100%; aspect-ratio: 9 / 16; }
.about-page .portrait-media > img { width: 100%; height: auto; }
.about-page .portrait-media > video { display: block; width: 100%; height: auto; }

.statement-section { padding-block: clamp(3.25rem, 7vw, 6rem); background: var(--v4-bg-deep); }
.studio-slogan { max-width: 28rem; padding-left: clamp(1.25rem, 3vw, 2rem); margin: 0 0 2.25rem; border-left: 4px solid var(--v4-ochre); }
.studio-slogan p { margin: 0; color: var(--v4-ochre-light); font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 600; line-height: 1.16; }
.studio-slogan-wide { max-width: 54rem; margin: 0; }

.section-grid { display: grid; grid-template-columns: minmax(13rem, 0.68fr) minmax(0, 1.32fr); gap: clamp(2.5rem, 7vw, 6.5rem); }
.longform-copy { max-width: 58ch; }
.longform-copy > :last-child { margin-bottom: 0; }

.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: 0; border: 1px solid var(--v4-petrol-border); list-style: none; }
.process li { padding: clamp(1.5rem, 4vw, 2.5rem); }
.process li + li { border-left: 1px solid var(--v4-petrol-border); }
.process strong,
.process span { display: block; }
.process strong { margin-bottom: 0.35rem; font-size: 1.25rem; font-weight: 600; }
.process span { color: var(--v4-text-secondary); font-family: var(--v4-font-heading); font-size: 0.9rem; }

.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.feature-copy { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 4px solid var(--v4-ochre); }
.feature-copy p { max-width: 54ch; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.editorial-note { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.editorial-note p { max-width: 40ch; padding-left: clamp(1.25rem, 3vw, 2rem); margin: 0; border-left: 4px solid var(--v4-ochre); color: var(--v4-ochre-light); font-size: clamp(1.4rem, 2.6vw, 2.15rem); font-weight: 600; line-height: 1.25; }
.text-panel { padding-top: 1.25rem; border-top: 2px solid var(--v4-petrol); }

.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.entry-card { display: flex; min-width: 0; border: 1px solid var(--v4-petrol-border); background: var(--v4-bg-raised); flex-direction: column; }
.entry-card .media-frame { border: 0; border-bottom: 1px solid var(--v4-petrol-border); }
.entry-card .media-frame > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.entry-copy { display: flex; align-items: flex-start; flex: 1; padding: clamp(1.5rem, 4vw, 2.5rem); flex-direction: column; }
.entry-copy .text-link { margin-top: auto; padding-top: 1rem; }

.artwork-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.artwork-card { min-width: 0; }
.artwork-card .media-frame { margin-bottom: 1.4rem; }
.artwork-card h3 small { display: block; margin-top: 0.45rem; color: var(--v4-text-secondary); font-family: var(--v4-font-text); font-size: 0.72em; font-weight: 400; }

.closing-copy { max-width: 58rem; padding-top: clamp(3rem, 6vw, 5rem); }
.closing-copy p { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.about-closing { display: grid; grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 7vw, 6.5rem); }
.compact-quote { padding-left: 1rem; margin: 1.25rem 0 0; border-left: 3px solid var(--v4-ochre); }
.compact-quote p { margin: 0; color: var(--v4-ochre-light); font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.closing-quote { margin-top: 2.5rem; }

/* 07) ADAPTACIÓN ----------------------------------------- */

@media (max-width: 50rem) {
  .section-grid,
  .about-closing {
    grid-template-columns: 1fr;
  }

  .artwork-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 38rem) {
  .entry-grid,
  .process,
  .two-columns {
    grid-template-columns: 1fr;
  }

  .process li + li {
    border-top: 1px solid var(--v4-petrol-border);
    border-left: 0;
  }
}