/* Stili della pagina "Bellaria": il posto, non l'hotel. */

.place-page {
  background: var(--color-surface-warm-alt);
  color: var(--color-text);
  padding-bottom: 92px
}

.place-hero {
  border-radius: 28px;
  width: min(1320px,100% - 48px);
  min-height: 530px;
  margin: 24px auto 0;
  position: relative;
  overflow: hidden
}

.place-hero>img {
  object-fit: cover;
  object-position: center 60%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.place-hero-shade {
  background:
    linear-gradient(90deg,#0b1219f2 0%,#0b1219d9 34%,#0b121980 62%,#0b12193d 100%),
    linear-gradient(180deg,#0b121966 0%,#0b12194d 45%,#0b1219b8 100%);
  position: absolute;
  inset: 0
}

.place-hero-copy {
  z-index: 1;
  width: min(1180px,100% - 80px);
  min-height: 530px;
  color: var(--color-on-dark);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
  padding: 56px 0;
  display: flex;
  position: relative
}

.place-hero-copy>span {
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px #0b1219f2, 0 0 3px #0b1219a6;
  font-size: .95rem;
  font-weight: 800
}

.place-hero h1 {
  letter-spacing: -.04em;
  text-shadow: 0 4px 30px #0b1219cc;
  margin: 14px 0 24px;
  font: 600 clamp(3.2rem,5.4vw,5.4rem)/.98 Georgia,serif
}

.place-hero p {
  max-width: 560px;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.7
}

.place-intro,
.place-note>div {
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 75px;
  width: min(1180px,100% - 48px);
  margin: 0 auto;
  padding: 80px 0 34px;
  display: grid
}

.place-intro>div span,
.place-note span,
.place-split-copy>span,
.place-gite-copy>span {
  color: var(--color-gold-deep,#6f4e05);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.place-intro h2,
.place-note h2,
.place-split-copy h2,
.place-gite-copy h2 {
  letter-spacing: -.03em;
  margin: 10px 0 0;
  font-size: clamp(1.9rem,3.2vw,2.8rem)
}

.place-intro>p,
.place-note p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75
}

.place-note>div {
  grid-template-columns: 1fr;
  gap: 12px;
  padding-bottom: 0
}

/* Fasce a due colonne: testo e fotografia, a lati alterni. */
.place-split {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 440px;
  margin-top: 60px;
  display: grid;
  overflow: hidden
}

.place-split>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 440px;
  max-height: 520px
}

.place-split-copy {
  background: linear-gradient(200deg,#fff 0%,#faf7f1 100%);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px max(48px,50vw - 590px) 60px 0;
  display: flex
}

.place-split:not(.place-split-rovescio) .place-split-copy {
  padding: 60px 60px 60px max(48px,50vw - 590px)
}

.place-split-rovescio .place-split-copy {
  background: linear-gradient(242deg,var(--color-surface-secondary) 0%,var(--color-surface-warm-alt) 100%);
  padding: 60px max(48px,50vw - 590px) 60px 60px
}

.place-split-copy p {
  max-width: 520px;
  margin: 18px 0 0;
  font-size: 1.05rem;
  line-height: 1.75
}

.place-link {
  background: var(--color-text);
  color: var(--color-on-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 8px;
  margin-top: 26px;
  padding: 16px 24px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-block
}

.place-gite {
  width: min(1180px,100% - 48px);
  margin: 70px auto 0
}

.place-gite-copy {
  max-width: 640px;
  margin-bottom: 26px
}

.place-gite-copy p {
  margin: 12px 0 0;
  font-size: 1.05rem;
  line-height: 1.7
}

.place-gite-griglia {
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  display: grid
}

.place-gite-griglia article {
  background: var(--color-surface);
  border: 1px solid #00000014;
  border-radius: 18px;
  padding: 26px 28px
}

.place-gite-griglia h3 {
  margin: 0 0 10px;
  font-size: 1.3rem
}

.place-gite-griglia p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7
}

@media (max-width:900px) {
  .place-intro {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .place-split,
  .place-split-rovescio {
    grid-template-columns: 1fr
  }

  .place-split-rovescio>img {
    order: -1
  }

  .place-split-copy,
  .place-split:not(.place-split-rovescio) .place-split-copy,
  .place-split-rovescio .place-split-copy {
    padding: 42px 24px
  }

  .place-gite-griglia {
    grid-template-columns: 1fr
  }

  .place-gite,
  .place-intro,
  .place-note>div {
    width: calc(100% - 32px)
  }
}

/* Adattamento al telefono: la fotografia di apertura occupava piu di mezzo
   schermo e quelle dei blocchi arrivavano a 450px. Vengono riportate alla
   scala del telefono insieme a titoli e spazi. */
@media (max-width: 680px) {
  .place-hero {
    overflow: hidden
  }

  .place-hero > img {
    height: 340px;
    max-height: 340px
  }

  .place-hero-copy {
    padding-top: 32px;
    padding-bottom: 32px
  }

  .place-hero-copy h1 {
    font-size: 2.3rem
  }

  .place-split > img {
    height: 230px;
    min-height: 230px;
    max-height: 230px
  }

  .place-split-copy {
    padding: 28px 20px
  }

  .place-split-copy h2,
  .place-gite-copy h2 {
    font-size: 25px
  }

  .place-gite {
    padding-top: 30px;
    padding-bottom: 30px
  }

  .place-gite-griglia {
    gap: 14px
  }

  .place-intro {
    padding-top: 30px;
    padding-bottom: 30px
  }
}

/* Le altezze minime della fascia di apertura e dei blocchi restavano quelle
   del desktop anche dopo aver ridotto le fotografie. */
@media (max-width: 680px) {
  .place-hero {
    min-height: 340px;
    width: calc(100% - 32px);
    border-radius: 20px
  }

  .place-split {
    min-height: 0
  }
}

@media (max-width: 680px) {
  .place-page .place-hero h1 {
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.12
  }

  .place-page h2 {
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.18
  }
}