/* OSPITI – layout assoluto pixel-perfect (XD 1920×2719, 6 righe × 4 col) */

.page--ospiti {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ospiti-canvas {
  position: relative;
  width: 100%;
  --ospiti-nav-gap: 24px;
  margin-top: calc(-1 * var(--nav-height) + var(--ospiti-nav-gap));
}

.ospiti-canvas__inner {
  /* Allineamento colonna contenuto = home / Programma (395px / 1130px vs XD 360px / 1201px) */
  --ospiti-xd-origin: 360px;
  --ospiti-xd-width: 1201px;
  --ospiti-rows: 6;
  --ospiti-row-step: 395px;
  --ospiti-grid-top: 231px;
  --ospiti-canvas-height: calc(var(--ospiti-grid-top) + var(--ospiti-rows) * var(--ospiti-row-step) + 118px);
  --ospiti-inset-x: var(--content-margin-left);
  --ospiti-content-w: var(--content-column-width);
  --ospiti-photo-w: 264.371px;
  --ospiti-photo-h: 264.624px;
  --ospiti-nameplate-w: 275.213px;
  --ospiti-nameplate-h: 86.194px;
  --ospiti-nameplate-overlap: 5.284px;

  position: relative;
  width: var(--page-width);
  height: var(--ospiti-canvas-height);
  margin-inline: auto;
}

/* ── Titolo + rule attaccata (come Programma / home hero-date) ── */
.ospiti-title-wrap {
  position: absolute;
  left: calc(var(--ospiti-inset-x) + (358.97px - var(--ospiti-xd-origin)) * var(--ospiti-content-w) / var(--ospiti-xd-width));
  top: 190px;
  font-size: 100px;
  transform: translateY(-1em);
  --hero-date-rule-overhang: 10px;
  z-index: 2;
}

.ospiti-title-wrap .hero-date__row {
  align-items: flex-start;
}

.ospiti-title {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0;
  color: var(--black);
}

/* ── Griglia card ── */
.ospiti-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ospiti-card {
  --ospiti-col: 0;
  --ospiti-row: 0;
  position: absolute;
  left: calc(var(--ospiti-inset-x) + (355px + var(--ospiti-col) * 312.333px - var(--ospiti-xd-origin)) * var(--ospiti-content-w) / var(--ospiti-xd-width));
  top: calc(var(--ospiti-grid-top) + var(--ospiti-row) * var(--ospiti-row-step));
  width: var(--ospiti-nameplate-w);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.ospiti-card__photo {
  display: block;
  width: var(--ospiti-photo-w);
  height: var(--ospiti-photo-h);
  margin-left: calc((var(--ospiti-nameplate-w) - var(--ospiti-photo-w)) / 2);
  object-fit: cover;
  filter: grayscale(100%);
}

.ospiti-card__nameplate {
  box-sizing: border-box;
  width: var(--ospiti-nameplate-w);
  height: var(--ospiti-nameplate-h);
  margin-top: calc(-1 * var(--ospiti-nameplate-overlap));
  padding: 5.5px;
}

.ospiti-card__nameplate-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 9px 8px 3px;
  overflow: hidden;
  border: 0.75px solid var(--black);
  background: var(--white);
}

.ospiti-card__name {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 25px;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  overflow-wrap: break-word;
}

.ospiti-card__name-line {
  display: block;
  min-width: 0;
}

.ospiti-card__name-line:empty {
  display: none;
}

.ospiti-card:hover .ospiti-card__photo,
.ospiti-card:focus-visible .ospiti-card__photo {
  filter: grayscale(0%);
}

.ospiti-card:hover .ospiti-card__nameplate-inner,
.ospiti-card:focus-visible .ospiti-card__nameplate-inner {
  background: var(--black);
  border-color: var(--black);
}

.ospiti-card:hover .ospiti-card__name,
.ospiti-card:focus-visible .ospiti-card__name {
  color: var(--white);
}

.ospiti-card--1  { --ospiti-col: 0; --ospiti-row: 0; }
.ospiti-card--2  { --ospiti-col: 1; --ospiti-row: 0; }
.ospiti-card--3  { --ospiti-col: 2; --ospiti-row: 0; }
.ospiti-card--4  { --ospiti-col: 3; --ospiti-row: 0; }
.ospiti-card--5  { --ospiti-col: 0; --ospiti-row: 1; }
.ospiti-card--6  { --ospiti-col: 1; --ospiti-row: 1; }
.ospiti-card--7  { --ospiti-col: 2; --ospiti-row: 1; }
.ospiti-card--8  { --ospiti-col: 3; --ospiti-row: 1; }
.ospiti-card--9  { --ospiti-col: 0; --ospiti-row: 2; }
.ospiti-card--10 { --ospiti-col: 1; --ospiti-row: 2; }
.ospiti-card--11 { --ospiti-col: 2; --ospiti-row: 2; }
.ospiti-card--12 { --ospiti-col: 3; --ospiti-row: 2; }
.ospiti-card--13 { --ospiti-col: 0; --ospiti-row: 3; }
.ospiti-card--14 { --ospiti-col: 1; --ospiti-row: 3; }
.ospiti-card--15 { --ospiti-col: 2; --ospiti-row: 3; }
.ospiti-card--16 { --ospiti-col: 3; --ospiti-row: 3; }
.ospiti-card--17 { --ospiti-col: 0; --ospiti-row: 4; }
.ospiti-card--18 { --ospiti-col: 1; --ospiti-row: 4; }
.ospiti-card--19 { --ospiti-col: 2; --ospiti-row: 4; }
.ospiti-card--20 { --ospiti-col: 3; --ospiti-row: 4; }
.ospiti-card--21 { --ospiti-col: 0; --ospiti-row: 5; }
.ospiti-card--22 { --ospiti-col: 1; --ospiti-row: 5; }
.ospiti-card--23 { --ospiti-col: 2; --ospiti-row: 5; }
.ospiti-card--24 { --ospiti-col: 3; --ospiti-row: 5; }

/* ── Desktop 900–1919 ── */
@media (min-width: 900px) and (max-width: 1919px) {
  .ospiti-canvas {
    position: relative;
    overflow: hidden;
    height: calc(var(--ospiti-canvas-height) * var(--canvas-scale-down));
  }

  .ospiti-canvas__inner {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(var(--canvas-scale-down));
    transform-origin: top center;
  }
}

/* ── Desktop ≥1920 ── */
@media (min-width: 1920px) {
  .ospiti-canvas {
    margin-top: calc(-1 * var(--nav-height) * var(--stage-scale) + var(--ospiti-nav-gap));
    position: relative;
    overflow: hidden;
    height: calc(var(--ospiti-canvas-height) * var(--stage-scale));
  }

  .ospiti-canvas__inner {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
  }
}

/* ── Mobile / tablet stretti ── */
@media (max-width: 899px) {
  .ospiti-canvas {
    margin-top: 0;
  }

  .ospiti-canvas__inner {
    --ospiti-photo-w: 100%;
    --ospiti-nameplate-w: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(32px, 5vw, 48px) var(--gutter) 64px;
    box-sizing: border-box;
  }

  .ospiti-title-wrap {
    position: static;
    transform: none;
    font-size: clamp(48px, 12vw, 80px);
    margin-bottom: clamp(24px, 5vw, 40px);
    --hero-date-rule-overhang: 7px;
  }

  .ospiti-grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 40px) clamp(16px, 4vw, 32px);
  }

  .ospiti-card {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ospiti-card__photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    align-self: stretch;
    vertical-align: bottom;
    object-fit: cover;
  }

  .ospiti-card__nameplate {
    width: 100%;
    max-width: 100%;
    height: var(--ospiti-nameplate-h);
    min-height: var(--ospiti-nameplate-h);
    margin: -5px 0 0;
    padding: 0;
    box-sizing: border-box;
    align-self: stretch;
    position: relative;
    z-index: 1;
    background: var(--white);
  }

  .ospiti-card:hover .ospiti-card__nameplate,
  .ospiti-card:focus-visible .ospiti-card__nameplate {
    background: var(--black);
  }

  .ospiti-card__nameplate-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 8px 3px;
    border-top: none;
  }

  .ospiti-card__name {
    font-size: clamp(16px, 4.2vw, 25px);
    line-height: 1.2;
  }
}

@media (max-width: 899px) and (min-width: 600px) {
  .ospiti-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}