/* ══════════════════════════════════════════
   paru paru — stylesheet v2
   Desktop grid (1440px):
     left margin  = 257px  (x of ITA col in Figma)
     col width    = 450px  (both ITA and ENG)
     col gap      = 26px   (733 - 707 = 26)
   Mobile grid (390px):
     margin       = 20px
     single col, swipe for second language
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,700;1,300;1,700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/*
  TODO prima della pubblicazione: attivare il font "paru paru" creato da Alessandra.
  Una volta ricevuto il file (idealmente .woff2 + .woff per compatibilità), copiarlo in
  assets/fonts/ e scommentare questo blocco. Nessun'altra modifica sarà necessaria:
  la variabile --font-display (vedi sotto) è già referenziata ovunque serve.
*/
  @font-face {
    font-family: 'paru paru';
    src: url('../fonts/paru.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

:root {
  --salmon:   #ea9e89;
  --aqua:     #7dd4ce;
  --purple:   #6b6176;
  --white:    #ffffff;
  --font:     'Averia Serif Libre', Georgia, serif;
  --gutter:   20px;
  /* left offset to col 4 = 3 col-widths + 1 gutter */
  --ml:       calc((100vw - 220px) / 4 + 20px);
  --grad:     linear-gradient(170deg, #6b6176 0%, #7e6e7f 30%, #b5847a 72%, #ea9e89 100%);
  --font-display: 'paru paru', var(--font);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--grad);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--white);
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999;
}

/* ── base types ── */
em, i  { font-weight: 700; font-style: italic; }
.light { font-weight: 300; font-style: normal; }
a      { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
p a    { color: var(--salmon); }
p + p  { margin-top: 0.85em; }


/* ═══════════════════════════════════════════
   HEADER  (sticky, blur always on)

   From Figma home-desktop:
   • Row 1 (y=28, h=67): Three "paru paru" SVG logos at
       x=-8 (w=435), x=499 (w=434), x=1005 (w=435)
     → rendered as flex row with space-between
   • Row 2 (y=128, h=30): nav items centered,
       font Averia Serif Libre Bold Italic 20px, color #ea9e89
═══════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(to bottom, #6b6176 0%, #6b6176 50%, rgba(107, 97, 118, 0) 100%);
}

/* Logo strip — continuous scrolling marquee */
.header-marquee {
  overflow: hidden;
  padding: 14px 0 6px;
  cursor: pointer;
}

.marquee-link {
  display: block;
  text-decoration: none !important;
}

.marquee-track {
  display: flex;
  gap: 42px;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: marquee-ltr 24s linear infinite;
}

.header-marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  font-size: 84px;
  letter-spacing: 2px;
  font-family: var(--font-display);
  color: var(--salmon);
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
}

/* Nav row — centered */
.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 42px;
  padding: 4px 20px 14px;
  overflow: hidden; /* desktop: no overflow */
}

.header-nav a {
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: var(--salmon);
  white-space: nowrap;
  transition: color .2s;
  text-decoration: none;
}
.header-nav a:hover,
.header-nav a.active { color: var(--white); }


/* ═══════════════════════════════════════════
   MAIN + BILINGUAL GRID

   .bilingual places ITA and ENG columns at
   the exact x positions from Figma:
     ITA: padding-left 257px, width 450px
     ENG: immediately after 26px gap, width 450px
═══════════════════════════════════════════ */

main { position: relative; z-index: 1; }

.page-section { padding: 64px 0 80px; }

.bilingual {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  grid-auto-flow: row dense;
}

/* display:contents dissolve the lang wrappers into the parent grid;
   children become direct grid items and are placed in the same rows */
.lang-eng { display: contents; }
.lang-ita { display: contents; }

.lang-eng > * { grid-column: 4 / 7; }
.lang-ita > * { grid-column: 7 / 10; }

/* ── HERO ── */
.hero {
  width: 100%;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(107,97,118,.2) 0%, rgba(107,97,118,0) 50%,
    rgba(107,97,118,.5) 100%);
}

/* ── TEXT STYLES ── */
.page-title {
  font-size: 40px; font-weight: 700; font-style: italic;
  margin-bottom: 40px; line-height: 1.1;
}
.body-text  { font-size: 19px; font-weight: 300; line-height: 1.3; }
.intro-text { font-size: 27px; font-weight: 300; line-height: 1.2; margin-bottom: 26px; }

.cat-label {
  font-size: 15px; font-weight: 700; font-style: italic;
  color: var(--salmon); letter-spacing: 1.8px;
  text-transform: uppercase; margin-bottom: 28px;
}
.sub-title {
  font-size: 26px; font-weight: 700; font-style: italic;
  margin-bottom: 24px;
}

/* ── NEWS TICKER ── */
.news-static-text {
  font-size: 27px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--salmon);
}
/* Le news generate da Kirby sono semplici <p> senza classe (Kirbytext
   non permette di assegnare classi ai paragrafi generati), quindi le
   selezioniamo per posizione invece che per classe. */
.news-ticker .lang-ita > p,
.news-ticker .lang-eng > p {
  font-size: 27px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--salmon);
}
.news-ticker .lang-ita > p + p,
.news-ticker .lang-eng > p + p {
  margin-top: 0.75em;
}
.news-ticker .lang-eng > p { grid-column: 2 / 7; }
.news-ticker .lang-ita > p { grid-column: 7 / 12; }

.news-static-text + .news-static-text { margin-top: 0.75em; }
.lang-eng > .news-static-text { grid-column: 2 / 7; }
.lang-ita > .news-static-text { grid-column: 7 / 12; }

.ticker-label {
  font-size: 16px;
  font-style: italic;
  font-weight: 300;
  color: var(--salmon);
  padding-left: var(--ml);
  margin-bottom: 12px;
}

.news-ticker {
  overflow: hidden;
  margin: 24px 0 36px;
  display: none;
}

.news-row {
  overflow: hidden;
  padding: 2.5px 0;
}

.news-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-rtl var(--speed, 55s) linear infinite;
}

.news-track span {
  font-size: 27px;
  font-weight: 300;
  white-space: nowrap;
  padding: 0 60px;
  line-height: 1.2;
  color: var(--salmon);
}

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── SPACES ── */
.space-block { margin-bottom: 72px; }

.space-name-marquee {
  overflow: hidden;
  margin-bottom: 28px;
}

.space-name-track {
  display: flex;
  gap: 84px;
  width: max-content;
  will-change: transform;
  animation: marquee-rtl 18s linear infinite;
}

.space-name-track span {
  font-size: 36px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  font-family: var(--font-display);
  color: var(--white);
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}

.space-gallery {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  margin-bottom: 32px;
  cursor: grab;
}
.space-gallery:active { cursor: grabbing; }
.space-gallery::-webkit-scrollbar { display: none; }

.gallery-track {
  display: flex;
  gap: var(--gutter);
  padding-left: var(--ml);
  padding-right: var(--ml);
}

.gallery-track img {
  height: 480px;
  width: auto;
  display: block;
  flex-shrink: 0;
  draggable: false;
  user-select: none;
  -webkit-user-drag: none;
}

.space-gallery.dragging {
  cursor: grabbing;
  user-select: none;
}

/* ── BIO IMAGE ROW ── */
.bio-image-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin-bottom: 16px;
}

.bio-image-row img {
  grid-column: 2 / 5;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
}

/* ── RESIDENTS ── */
.resident-block { margin-bottom: 44px; }
.resident-block .resident-name { font-size: 24px; font-weight: 700; font-style: italic; margin-bottom: 8px; }
.resident-block p { font-size: 19px; font-weight: 300; line-height: 1.3; }
.resident-block .links { margin-top: 9px; font-size: 15px; }
.resident-dates { font-size: 16px; font-weight: 300; font-style: normal; line-height: 1.5; opacity: .6; margin-bottom: 6px; }
.resident-block .links a { color: var(--salmon); margin-right: 12px; }

/* ── FRIENDS ── */
.friend-entry { margin-bottom: 22px; font-size: 19px; font-weight: 300; line-height: 1.3; }
.friend-entry a { color: var(--salmon); }

/* ── IMAGE BLOCKS ── */
.img-block {
  display: block;
  margin: 64px auto;
}
.img-block img {
  display: block;
  width: 100%;
  height: auto;
}
/* col-width = (100vw - 11 gutters) / 12; n-col = n × col-width + (n-1) gutters */
.img-6col  { max-width: calc((100vw - 220px) / 12 * 6  + 5  * 20px); }
.img-8col  { max-width: calc((100vw - 220px) / 12 * 8  + 7  * 20px); }
.img-10col { max-width: calc((100vw - 220px) / 12 * 10 + 9  * 20px); }

/* ── READING ROOM ── */
.catalogue-link {
  display: inline-block;
  font-size: 24px; font-weight: 700; font-style: italic;
  color: var(--salmon);
  margin-top: 28px; letter-spacing: 3px;
}

/* ── RESIDENCY TYPES ── */
.residency-type  { margin-bottom: 52px; }
.residency-type h3 { font-size: 24px; font-weight: 700; font-style: italic; margin-bottom: 4px; }
.residency-type .type-subtitle { font-size: 16px; font-style: italic; color: var(--salmon); margin-bottom: 18px; }

/* ── CTA VECCHIA 
.cta-line { font-size: 22px; font-weight: 700; font-style: italic; color: var(--salmon); margin-top: 36px; }
.cta-line a { color: var(--salmon); } ── */

/* ── CTA ── */
/* .cta-line ora è l'intero link (non solo la freccia finale):
   tutta la riga è cliccabile, il testo non mostra più il nome
   della pagina di destinazione, solo la freccia decorativa. */
a.cta-line {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: var(--salmon);
  margin-top: 36px;
}
a.cta-line:hover { text-decoration: underline; }

/* ── READING ROOM gallery (centrata, non allineata alle colonne) ── */
.rr-gallery {
  max-width: calc((100vw - 220px) / 12 * 10 + 9 * 20px);
  margin: 40px auto;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
}
.rr-gallery:active { cursor: grabbing; }
.rr-gallery::-webkit-scrollbar { display: none; }
.rr-gallery.dragging { cursor: grabbing; user-select: none; }

.rr-gallery-track {
  display: flex;
  gap: var(--gutter);
  justify-content: center;
  width: max-content;
  min-width: 100%;
}

.rr-gallery-track img {
  height: 400px;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── READING ROOM image pair ── */
.lang-eng > .rr-img { grid-column: 3 / 7; }
.lang-ita > .rr-img { grid-column: 7 / 11; }
.rr-img { margin: 40px 0; }
.rr-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }


/* ═══════════════════════════════════════════
   FOOTER
   Same logo strip as header, then contact info
   aligned to content columns
═══════════════════════════════════════════ */

.site-footer {
  position: relative; z-index: 1;
  padding: 40px 0 36px;
}

.footer-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
}
.footer-logos a {
  font-size: 36px; font-weight: 700; font-style: italic;
  line-height: 1; color: var(--white);
  white-space: nowrap; text-decoration: none;
  flex: 1; text-align: center;
}
.footer-logos a:first-child { text-align: left; }
.footer-logos a:last-child  { text-align: right; }
.footer-logos a:hover { opacity: 0.7; }

.footer-info {
  padding: 0 18px 18px;
  font-size: 14px; font-weight: 300;
  line-height: 2;
  color: var(--white);
  text-align: center;
}
.footer-info a { color: var(--salmon); }


/* ═══════════════════════════════════════════
   MOBILE  ≤ 768px
═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* header — mobile */
  .site-header { padding-bottom: 28px; }
  .header-marquee { padding: 0 0 4px; margin-top: -20px; }
  .marquee-track { gap: 52px; }
  .marquee-track span { font-size: 72px; }

  /* nav — horizontal scroll, no visible scrollbar */
  .header-nav {
    justify-content: flex-start;
    gap: 36px;
    overflow-x: auto;
    padding: 0 18px 12px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { font-size: 20px; }

  /* bilingual → peek layout */
  .bilingual {
    display: block;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    position: relative;
  }
  .lang-eng, .lang-ita { display: block; }
  .lang-eng > *, .lang-ita > * { grid-column: auto; }

  .bil-track {
    display: flex;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .bil-track > * { min-width: 100%; flex-shrink: 0; }
  .bil-track .lang-eng { order: 1; } /* ENG default */
  .bil-track .lang-ita { order: 2; }

  .swipe-hint {
    font-size: 9px; letter-spacing: 2px;
    font-weight: 700; font-style: italic;
    color: var(--salmon); margin-bottom: 14px;
    text-transform: uppercase; display: none; /* shown by JS */
  }

  .swipe-dots {
    display: none; /* shown by JS */
    gap: 7px; margin-top: 18px;
  }
  .swipe-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.3);
    cursor: pointer; transition: background .2s;
  }
  .swipe-dot.on { background: var(--salmon); }

  /* typography */
  .page-title  { font-size: 28px; margin-bottom: 24px; }
  .intro-text  { font-size: 20px; }
  .body-text   { font-size: 17px; }
  .news-label  { padding-left: 20px; font-size: 26px; }
  .space-name  { padding-left: 20px; font-size: 26px; }
  .page-section { padding: 40px 0 54px; }

  /* ── peek layout bilingual ── */
  .bil-track {
    gap: 10px;
    padding-left: 20px;
  }
  .bil-track > * {
    flex: 0 0 calc(100vw - 70px);
    min-width: 0;
  }
  .swipe-hint,
  .swipe-dots { padding-left: 20px; }
  .ticker-label { padding-left: 20px; }

  /* image blocks — griglia mobile a 6 colonne */
  .img-block { margin: 32px auto; }
  .img-6col,
  .img-8col  { max-width: calc(100vw - 40px); }
  .img-10col { max-width: 100vw; }

  /* footer — testo multiriga */
  .footer-logos a { font-size: 22px; }
  .footer-info {
    padding: 0 16px;
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
  }
}