/* ==========================================================================
   Coppelius · La compañía (Fase 1)
   SIN diseño en Figma: página editorial con la estructura de la referencia
   (Wiener Staatsoper › Architecture › From the outside: foto grande de la
   casa, bloques de texto largos, pareja izquierda / derecha) más una cita y
   cifras, en el lenguaje del sistema de diseño v0.1. Se carga después de
   styles.css.

   Bloques: .company-hero · .company-intro · .company-features · .company-feature
            .company-quote · .company-facts · .company-places · .company-place
            .company-links · .company-link
   Fase 2: página de WordPress; cada clase BEM → clase global;
   @media → breakpoints de Bricks (base · ≤991 · ≤767).
   ========================================================================== */


/* --------------------------------------------------------------------------
   Antetítulos (overline del sistema de diseño)
   -------------------------------------------------------------------------- */
.company-hero__eyebrow,
.company-feature__eyebrow,
.company-link__eyebrow {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-accent-on-light);
}


/* --------------------------------------------------------------------------
   Encabezado + imagen a sangre del contenedor
   -------------------------------------------------------------------------- */
.company-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-gutter) var(--space-0);
  background-color: var(--color-bg-page);
}

.company-hero__inner {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
  align-items: end;
  gap: var(--space-6) var(--space-12);
}

.company-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
}

.company-hero__title {
  font-size: var(--font-size-display);
  color: var(--color-text-heading);
}

.company-hero__lead {
  max-width: 560px;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

.company-hero__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: 0px;
}

.company-hero__media {
  width: 100%;
  aspect-ratio: 1344 / 640;
  overflow: hidden;
  border-radius: var(--radius-surface);
}

.company-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-hero__caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Introducción
   -------------------------------------------------------------------------- */
.company-intro {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-page);
}

.company-intro__inner {
  display: grid;
  grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr);
  gap: var(--space-12);
}

.company-intro__lead {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-text-heading);
}

.company-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-md);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}


/* --------------------------------------------------------------------------
   Áreas · bloques imagen + texto alternos
   -------------------------------------------------------------------------- */
.company-features {
  padding: var(--space-0) var(--space-gutter) var(--space-section-y);
  background-color: var(--color-bg-page);
}

.company-features__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-section-y);
}

.company-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
}

.company-feature--reverse {
  flex-direction: row-reverse;
}

.company-feature__media {
  flex: 0 1 58%;
  min-width: 0px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-surface);
}

.company-feature__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  flex: 1 1 0px;
  min-width: 0px;
}

.company-feature__title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-h2);
  color: var(--color-text-heading);
}

.company-feature__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}


/* --------------------------------------------------------------------------
   Cita
   -------------------------------------------------------------------------- */
.company-quote {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-warm);
}

.company-quote__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 960px;
  margin-block: 0px;
  text-align: center;
}

.company-quote__mark {
  height: 48px;
  font-family: var(--font-family-display);
  font-size: 96px;
  line-height: 1;
  color: var(--color-border-accent-on-light);
}

.company-quote__text {
  margin: 0px;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-heading);
  color: var(--color-text-heading);
}

.company-quote__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-body);
  line-height: var(--line-height-tight);
}

.company-quote__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-accent-on-light);
}

.company-quote__role {
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Cifras (banda navy)
   -------------------------------------------------------------------------- */
.company-facts {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-inverse);
}

.company-facts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.company-facts__title {
  font-size: var(--font-size-h2);
  color: var(--color-text-inverse);
}

.company-facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: var(--space-8);
  margin: 0px;
}

/* La cifra va antes que su etiqueta a la vista; en el DOM, dt antes que dd */
.company-facts__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--color-border-accent);
}

.company-facts__value {
  margin: 0px;
  font-family: var(--font-family-display);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-accent);
}

.company-facts__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse-muted);
}


/* --------------------------------------------------------------------------
   Dónde trabajamos · pareja izquierda / derecha
   -------------------------------------------------------------------------- */
.company-places {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-page);
}

.company-places__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.company-places__title,
.company-links__title {
  font-size: var(--font-size-h2);
  color: var(--color-text-heading);
}

.company-places__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: var(--space-12);
}

.company-place {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.company-place__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-surface);
}

.company-place__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-place__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
}

.company-place__title {
  font-size: var(--font-size-h4);
  color: var(--color-text-heading);
}

.company-place__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}


/* --------------------------------------------------------------------------
   Sigue explorando · tarjetas enlazadas (patrón .card del DS §6.3)
   -------------------------------------------------------------------------- */
.company-links {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-subtle);
}

.company-links__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.company-links__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: var(--space-6);
}

.company-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-xs);
  padding: var(--space-card);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-surface);
  background-color: var(--color-bg-page);
  transition: box-shadow var(--motion-duration-fast) var(--motion-easing),
    border-color var(--motion-duration-fast) var(--motion-easing);
}

.company-link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-raised);
}

.company-link:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.company-link__title {
  font-size: var(--font-size-h4);
  color: var(--color-text-heading);
}

/* Toda la tarjeta es clicable */
.company-link__anchor::after {
  content: "";
  position: absolute;
  inset: 0px;
}

.company-link__anchor:focus-visible {
  outline: none;
}

.company-link__text {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   ≤991 · tablet (derivado)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .company-hero__inner,
  .company-intro__inner {
    grid-template-columns: minmax(0px, 1fr);
  }

  .company-feature,
  .company-feature--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .company-feature__media {
    flex: 0 0 auto;
  }

  .company-facts__list {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }

  .company-links__list {
    grid-template-columns: minmax(0px, 1fr);
  }
}


/* --------------------------------------------------------------------------
   ≤767 · móvil (derivado; artboard 390)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .company-hero {
    gap: var(--space-8);
    padding-top: var(--space-10);
  }

  .company-hero__media {
    aspect-ratio: 4 / 3;
  }

  .company-intro__inner {
    gap: var(--space-6);
  }

  .company-quote__mark {
    height: 32px;
    font-size: 72px;
  }

  .company-quote__text {
    font-size: var(--font-size-h4);
  }

  .company-facts__list {
    gap: var(--space-6) var(--space-4);
  }

  .company-facts__value {
    font-size: var(--font-size-h1);
  }

  .company-places__list {
    grid-template-columns: minmax(0px, 1fr);
    gap: var(--space-10);
  }
}