/* ------------------------------------
   Buhemsa page
------------------------------------ */

.buhemsa-page {
  width: 100%;
}

/* ------------------------------------
   Intro
------------------------------------ */

.buhemsa-intro {
  padding: 0 var(--page-padding);
  margin-top: var(--header-spacing);
  align-items: start;
}

.buhemsa-intro__text {
  grid-column: 4 / 12;
  max-width: 34rem;
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
  transform: rotate(-0.4deg);
  transform-origin: left top;
}

/* ------------------------------------
   Board
------------------------------------ */

.buhemsa-board {
  padding: 56px var(--page-padding) 0;
  align-items: start;
}

.buhemsa-piece {
  margin: 0;
  position: relative;
}

.buhemsa-piece img,
.buhemsa-piece video {
  display: block;
  width: 100%;
  height: auto;
}

.buhemsa-piece img {
  object-fit: cover;
}

.buhemsa-piece video {
  object-fit: contain;
}

.buhemsa-piece--text,
.buhemsa-piece--small-text,
.buhemsa-reveal,
.buhemsa-card,
.buhemsa-link-card,
.buhemsa-reveal-text,
.buhemsa-statement,
.buhemsa-video-label {
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
}

.buhemsa-piece--text {
  max-width: 20rem;
}

.buhemsa-piece--small-text {
  max-width: 16rem;
}

/* reveal con espacio reservado desde el inicio */
.buhemsa-reveal {
  display: block;
  margin-top: 8px;
  max-width: 20rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.buhemsa-piece--clickable.is-open .buhemsa-reveal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* alturas reservadas por pieza para evitar saltos */
.buhemsa-piece--solo-b .buhemsa-reveal {
  min-height: 5.5em;
}

.buhemsa-piece--pair-b-text .buhemsa-reveal {
  min-height: 4.5em;
}

.buhemsa-piece--solo-e .buhemsa-reveal {
  min-height: 3.5em;
}

.buhemsa-piece--pair-d-text .buhemsa-reveal {
  min-height: 1.8em;
}

/* pieza final: reserva hueco de imagen desde el inicio */
.buhemsa-piece--solo-h .buhemsa-reveal {
  margin-top: 0;
  margin-bottom: 8px;
  max-width: none;
}

.buhemsa-piece--solo-h .buhemsa-reveal--image {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.buhemsa-piece--solo-h .buhemsa-reveal--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------
   Clickable elements
------------------------------------ */

.buhemsa-toggle,
.buhemsa-video-toggle,
.buhemsa-statement,
.buhemsa-inline-word {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.buhemsa-toggle:focus-visible,
.buhemsa-video-toggle:focus-visible,
.buhemsa-statement:focus-visible,
.buhemsa-inline-word:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.buhemsa-card {
  max-width: 18rem;
}

.buhemsa-card__kicker {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
}

.buhemsa-card__title {
  display: block;
  margin-top: 2px;
}

.buhemsa-link-card {
  text-decoration: underline;
  text-underline-offset: 0.08em;
  max-width: fit-content;
}

/* ------------------------------------
   Statement
------------------------------------ */

.buhemsa-piece--statement {
  max-width: 22rem;
}

.buhemsa-statement {
  display: inline-flex;
  width: auto;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.buhemsa-statement__dynamic {
  min-width: 1ch;
}

.buhemsa-statement.is-complete {
  opacity: 1;
}

/* ------------------------------------
   Inline word panel
------------------------------------ */

.buhemsa-piece--word-panel {
  max-width: 20rem;
}

.buhemsa-inline-word {
  display: inline;
  width: auto;
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.buhemsa-inline-word.is-active {
  opacity: 0.5;
}

.buhemsa-inline-panels {
  position: relative;
  margin-top: 8px;
  min-height: 6em;
}

.buhemsa-inline-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.buhemsa-inline-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.buhemsa-inline-panel img {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ------------------------------------
   Videos
------------------------------------ */

.buhemsa-piece--video {
  width: 100%;
}

.buhemsa-video-toggle {
  position: relative;
}

.buhemsa-video {
  width: 100%;
}

.buhemsa-video-label {
  display: block;
  margin-top: 8px;
  max-width: 18rem;
}

.buhemsa-video-toggle.is-playing .buhemsa-video-label {
  opacity: 0.55;
}

/* ------------------------------------
   Composition
------------------------------------ */

.buhemsa-piece--solo-a {
  grid-column: 1 / 5;
  margin-top: 0;
}

.buhemsa-piece--solo-b {
  grid-column: 6 / 10;
  margin-top: -6px;
}

.buhemsa-piece--solo-c {
  grid-column: 12 / 17;
  margin-top: 42px;
}

.buhemsa-piece--pair-a-image {
  grid-column: 15 / 19;
  margin-top: 94px;
}

.buhemsa-piece--pair-b-text {
  grid-column: 2 / 6;
  margin-top: -200px;
}

.buhemsa-piece--pair-b-image {
  grid-column: 6 / 10;
  margin-top: -200px;
}

.buhemsa-piece--pair-a-text {
  grid-column: 13 / 17;
  margin-top: 18px;
}

.buhemsa-piece--solo-d {
  grid-column: 1 / 7;
  margin-top: 88px;
}

.buhemsa-piece--pair-c-text {
  grid-column: 9 / 13;
  margin-top: 80px;
  transform: rotate(2deg);
  transform-origin: left top;
}

.buhemsa-piece--pair-c-image {
  grid-column: 14 / 18;
  margin-top: 120px;
}

.buhemsa-piece--solo-e {
  grid-column: 8 / 11;
  margin-top: 38px;
}

.buhemsa-piece--solo-f {
  grid-column: 3 / 7;
  margin-top: 24px;
}

.buhemsa-piece--solo-g {
  grid-column: 12 / 16;
  margin-top: 82px;
}

.buhemsa-piece--pair-d-image {
  grid-column: 1 / 6;
  margin-top: 76px;
}

.buhemsa-piece--pair-d-text {
  grid-column: 6 / 9;
  margin-top: 20px;
}

.buhemsa-piece--solo-h {
  grid-column: 16 / 19;
  margin-top: 34px;
}



/* ------------------------------------
   Responsive
------------------------------------ */

@media (max-width: 991px) {
  .buhemsa-intro__text {
    grid-column: 4 / 15;
    max-width: 40rem;
  }

  .buhemsa-board {
    padding-top: 48px;
  }

  .buhemsa-piece--solo-a { grid-column: 1 / 6; }
  .buhemsa-piece--solo-b { grid-column: 7 / 12; }
  .buhemsa-piece--solo-c { grid-column: 13 / 19; }
  .buhemsa-piece--pair-a-image { grid-column: 14 / 19; }
  .buhemsa-piece--pair-b-text { grid-column: 2 / 7; }
  .buhemsa-piece--pair-b-image { grid-column: 7 / 12; }
  .buhemsa-piece--pair-a-text { grid-column: 13 / 18; }
  .buhemsa-piece--solo-d { grid-column: 1 / 5; }
  .buhemsa-piece--pair-c-text { grid-column: 5 / 11; }
  .buhemsa-piece--pair-c-image { grid-column: 14 / 19; }
  .buhemsa-piece--solo-e { grid-column: 11 / 14; }
  .buhemsa-piece--solo-f { grid-column: 2 / 7; }
  .buhemsa-piece--solo-g { grid-column: 12 / 17; }
  .buhemsa-piece--pair-d-image { grid-column: 1 / 7; }
  .buhemsa-piece--pair-d-text { grid-column: 7 / 11; }
  .buhemsa-piece--solo-h { grid-column: 15 / 19; }
}

@media (max-width: 767px) {

  .buhemsa-board {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 40px;
    padding-top: 32px;
  }

  .buhemsa-piece {
    margin-top: 0;
  }

  .buhemsa-intro__text {
    grid-column: 2 / 9;
  }

  /* --- fila 1 --- */
  .buhemsa-piece--solo-a {
    grid-column: 1 / 5;
  }

  .buhemsa-piece--solo-b {
    grid-column: 6 / -1;
  }

  /* --- statement centrado --- */
  .buhemsa-piece--solo-c {
    grid-column: 2 / 10;
    min-height: 12em; 
    transform: rotate(-0.8deg);
    transform-origin: left top;
  }

  .buhemsa-piece--solo-c .buhemsa-statement {
    display: block;
    width: 100%;
  }
  

  /* --- pair A --- */
.buhemsa-piece--pair-a-text {
  grid-column: 1 / 6;
  margin-top: -170px;
}

.buhemsa-piece--pair-a-image {
  grid-column: 7 / -1;
}

  /* --- pair B --- */
  .buhemsa-piece--pair-b-text {
    grid-column: 1 / 5;
  }

  .buhemsa-piece--pair-b-image {
    grid-column: 5 / 11;
  }

  /* --- solo D --- */
  .buhemsa-piece--solo-d {
    grid-column: 1 / 6;
  }

  /* --- pair C --- */
  .buhemsa-piece--pair-c-text {
    grid-column: 1 / 6;
  }

  .buhemsa-piece--pair-c-image {
    grid-column: 6 / 11;
  }

  /* --- notas --- */
  .buhemsa-piece--solo-e {
    grid-column: 2 / 6;
  }

  /* --- imagen amarilla --- */
  .buhemsa-piece--solo-f {
    grid-column: 6 / -1;
  }

  /* --- video pequeño izquierda --- */
  .buhemsa-piece--solo-g {
    grid-column: 1 / 5;
    margin-top: 20px;
  }

  /* =========================
     ORDEN VISUAL CORREGIDO
     ========================= */

  /* --- abrir correo (sube antes que referencias) --- */
  .buhemsa-piece--solo-h {
    grid-column: 7 / 11;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    order: 1;
    margin-top: 100px;
  }

  .buhemsa-piece--solo-h .buhemsa-toggle {
    order: -1;
    margin-bottom: 8px;
  }

  /* --- referencias (bajan después) --- */
  
  .buhemsa-piece--pair-d-text {
    grid-column: 3 / 5;
    order: 2;
    margin-top: -100px;
  }


  .buhemsa-piece--pair-d-image {
    grid-column: 6 / 11;
    order: 2;
  }

  /* --- ajustes generales --- */
  .buhemsa-piece--text,
  .buhemsa-piece--small-text,
  .buhemsa-reveal,
  .buhemsa-card,
  .buhemsa-piece--statement,
  .buhemsa-piece--word-panel {
    max-width: none;
  }

  .buhemsa-reveal {
    margin-top: 6px;
  }
}