/*
 * Joyee Sauna — Sauna single stylesheet
 *
 * File:
 * /wp-content/themes/karilonsimple/assets/css/sauna-single.css
 *
 * Versione:
 * 2026-09-02 — v1.3
 *
 * Stili specifici per single-sauna.php.
 *
 * Il design riprende il linguaggio visuale
 * della singola Spa Joyee, adattato alla palette Sauna.
 */


/* =========================================================
   1. SINGLE — STRUTTURA PAGINA
   ========================================================= */

.sauna-single {
  position: relative;

  overflow: hidden;

  /*
   * L'header del tema è fixed.
   *
   * Il primo elemento della pagina è il breadcrumb:
   * riserviamo quindi esplicitamente lo spazio occupato
   * dall'header prima del normale padding del single.
   */
  padding:
    calc(
      var(--header-h)
      + clamp(2rem, 4vw, 4rem)
    )
    0
    clamp(4rem, 7vw, 7rem);

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(198, 140, 72, 0.16),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--wp--preset--color--soft) 0%,
      var(--wp--preset--color--bg) 36%
    );
}


.sauna-single::before {
  content: "";

  position: absolute;

  inset:
    8rem
    auto
    auto
    -12rem;

  width: 34rem;
  height: 34rem;

  border-radius: 999px;

  background:
    rgba(198, 140, 72, 0.11);

  filter: blur(52px);

  pointer-events: none;
}


.sauna-single > .container {
  position: relative;

  z-index: 1;

  width:
    min(1440px, 96vw);
}


/* =========================================================
   2. BREADCRUMBS
   ========================================================= */

.sauna-breadcrumbs-wrap {
  margin-bottom:
    clamp(1.5rem, 3vw, 2.5rem);

  font-size: 0.92rem;
}


.sauna-single .ks-breadcrumbs {
  display: flex;
  flex-wrap: wrap;

  gap: 0.45rem;

  align-items: center;

  color:
    rgba(28, 28, 28, 0.58);
}


.sauna-single .ks-breadcrumbs a {
  color:
    rgba(28, 28, 28, 0.72);

  text-decoration: none;

  transition:
    color 0.18s ease;
}


.sauna-single .ks-breadcrumbs a:hover {
  color:
    var(--wp--preset--color--primary);
}


/* =========================================================
   3. HERO
   ========================================================= */

.sauna-hero {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(360px, 0.85fr);

  gap:
    clamp(2rem, 5vw, 5rem);

  align-items: center;

  margin-bottom:
    clamp(4rem, 7vw, 7rem);
}


/* =========================================================
   4. HERO — MEDIA
   ========================================================= */

.sauna-hero__media {
  position: relative;

  min-width: 0;

  overflow: visible;

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;
}


.sauna-hero__media::before {
  content: "";

  position: absolute;

  z-index: -1;

  inset:
    7%
    -6%
    auto
    auto;

  width:
    min(42vw, 32rem);

  height:
    min(42vw, 32rem);

  border-radius: 999px;

  background:
    radial-gradient(
      circle,
      rgba(198, 140, 72, 0.22),
      rgba(198, 140, 72, 0) 64%
    );

  filter: blur(20px);

  pointer-events: none;
}


.sauna-hero__image {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 30px;

  object-fit: contain;
}


/* Etichette prodotto
 *
 * Il blocco è posizionato una sola volta nell'area media
 * del prodotto, sopra la gallery principale.
 * Non viene replicato sulle miniature.
 */

.sauna-badges {
  position: absolute;

  z-index: 3;

  top: 1rem;
  left: 1rem;

  display: flex;
  flex-wrap: wrap;

  gap: 0.5rem;

  max-width:
    calc(100% - 2rem);

  pointer-events: none;
}


.sauna-badge {
  display: inline-flex;
  align-items: center;

  padding:
    0.42rem
    0.75rem;

  color: #fff;

  background: #b64545;

  border-radius: 999px;

  box-shadow:
    0 10px 24px
    rgba(182, 69, 69, 0.25);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  line-height: 1.15;

  text-transform: uppercase;
}


/* Gallery plugin */

.sauna-hero .ks-gallery {
  width: 100%;

  margin: 0;
}


.sauna-hero .ks-gallery__main {
  overflow: hidden;

  background: transparent;

  border-radius: 30px;

  box-shadow: none;
}


.sauna-hero .ks-gallery__thumbs {
  margin-top: 1rem;
}


/* =========================================================
   5. HERO — INFO
   ========================================================= */

.sauna-hero__info {
  min-width: 0;
}


/* Tipo Sauna */

.sauna-type {
  display: flex;
  flex-wrap: wrap;

  gap: 0.5rem;

  margin:
    0
    0
    1rem;
}


.sauna-type__pill {
  display: inline-flex;
  align-items: center;

  min-height: 2rem;

  padding:
    0.4rem
    0.78rem;

  color:
    var(--wp--preset--color--accent);

  background:
    rgba(198, 140, 72, 0.10);

  border:
    1px solid
    rgba(198, 140, 72, 0.35);

  border-radius: 999px;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.045em;

  line-height: 1.2;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}


a.sauna-type__pill:hover {
  color: #fff;

  background:
    var(--wp--preset--color--primary);

  border-color:
    var(--wp--preset--color--primary);

  transform:
    translateY(-1px);
}


/* Titolo */

.sauna-title {
  margin:
    0
    0
    1rem;

  font-size:
    clamp(3rem, 7vw, 6.4rem);

  line-height: 0.92;

  text-wrap: balance;
}


/* Excerpt */

.sauna-excerpt {
  max-width: 48ch;

  margin:
    0
    0
    1.5rem;

  color:
    rgba(28, 28, 28, 0.72);

  font-size:
    clamp(
      1.05rem,
      0.5vw + 1rem,
      1.28rem
    );

  line-height: 1.55;
}


/* =========================================================
   6. PREZZO
   ========================================================= */

.sauna-price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  align-items: baseline;

  gap: 0.55rem;

  margin:
    0
    0
    1.25rem;

  padding: 0;

  border: 0;
}


.sauna-price__value {
  color:
    var(--wp--preset--color--dark);

  font-family:
    var(--wp--preset--font-family--inter);

  font-size:
    clamp(
      1.5rem,
      1.4vw + 1rem,
      2.25rem
    );

  font-weight: 750;

  line-height: 1.1;
}


.sauna-price__tax {
  color:
    rgba(28, 28, 28, 0.66);

  font-size:
    clamp(
      0.8rem,
      0.25vw + 0.76rem,
      0.98rem
    );

  font-weight: 650;

  line-height: 1.2;

  white-space: nowrap;
}


/* =========================================================
   7. CTA
   ========================================================= */

.sauna-cta {
  display: block;

  margin:
    0
    0
    1rem;
}


.sauna-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    0.85rem
    1.35rem;

  color: #fff;

  background:
    var(--wp--preset--color--primary);

  border-radius: 999px;

  box-shadow:
    0 18px 38px
    rgba(198, 140, 72, 0.26);

  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}


.sauna-cta__button:hover {
  color: #fff;

  background:
    var(--wp--preset--color--accent);

  transform:
    translateY(-2px);

  box-shadow:
    0 22px 46px
    rgba(164, 110, 56, 0.24);
}


/* =========================================================
   8. DOCUMENTI
   ========================================================= */

.sauna-documents {
  display: grid;

  gap: 0.85rem;

  max-width: 520px;

  margin-top: 1.25rem;
}


.sauna-document-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  padding:
    0.68rem
    1rem;

  color:
    rgba(28, 28, 28, 0.78);

  background:
    rgba(255, 255, 255, 0.62);

  border:
    1px solid
    rgba(28, 28, 28, 0.14);

  border-radius: 999px;

  font-family:
    var(--wp--preset--font-family--inter);

  font-size: 0.92rem;

  font-weight: 700;

  line-height: 1.2;

  text-decoration: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}


.sauna-document-link::before {
  content: "";

  display: inline-block;

  width: 0.9rem;
  height: 0.9rem;

  margin-right: 0.5rem;

  background:
    currentColor;

  mask-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v11m0 0 4-4m-4 4-4-4M5 19h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  mask-repeat: no-repeat;

  mask-position: center;

  mask-size: contain;
}


.sauna-document-link:hover {
  color:
    var(--wp--preset--color--accent);

  background:
    rgba(198, 140, 72, 0.10);

  border-color:
    rgba(198, 140, 72, 0.5);

  transform:
    translateY(-1px);
}


/* =========================================================
   9. SPECS
   ========================================================= */

.sauna-specs {
  margin-bottom:
    clamp(4rem, 7vw, 7rem);

  padding:
    clamp(2rem, 4vw, 3.5rem);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      #fff
    );

  border-radius: 32px;

  box-shadow:
    0 26px 70px
    rgba(28, 28, 28, 0.07);
}


.sauna-specs__title {
  margin:
    0
    0
    clamp(1.5rem, 3vw, 2.25rem);

  font-size:
    clamp(2rem, 3vw, 3.2rem);

  line-height: 1.05;
}


.sauna-specs__grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1px;

  overflow: hidden;

  background:
    rgba(28, 28, 28, 0.08);

  border:
    1px solid
    rgba(28, 28, 28, 0.08);

  border-radius: 22px;
}


.sauna-spec {
  min-width: 0;

  padding: 1rem;

  background: #fff;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}


.sauna-spec:hover {
  z-index: 1;

  background:
    linear-gradient(
      180deg,
      #fff,
      rgba(251, 248, 244, 0.82)
    );

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(28, 28, 28, 0.08);
}


.sauna-spec__label {
  margin-bottom: 0.28rem;

  color:
    rgba(28, 28, 28, 0.55);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.sauna-spec__value {
  color:
    var(--wp--preset--color--dark);

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.35;
}


/* =========================================================
   10. TABS
   ========================================================= */

.sauna-tabs {
  margin:
    0
    0
    clamp(3rem, 6vw, 6rem);

  overflow: visible;

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;
}


.sauna-tabs__nav {
  display: flex;
  flex-wrap: wrap;

  gap: 0.6rem;

  margin-bottom: 1.5rem;

  padding: 0;

  background: transparent;

  border: 0;
}


.sauna-tab {
  appearance: none;

  position: relative;

  padding:
    0.75rem
    1.1rem;

  color:
    rgba(28, 28, 28, 0.72);

  background: #fff;

  border:
    1px solid
    rgba(28, 28, 28, 0.12);

  border-radius: 999px;

  cursor: pointer;

  font:
    inherit;

  font-weight: 700;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.sauna-tab::after {
  display: none;
}


.sauna-tab:hover {
  color:
    var(--wp--preset--color--accent);

  border-color:
    rgba(198, 140, 72, 0.55);

  transform:
    translateY(-1px);
}


.sauna-tab.is-active {
  color: #fff;

  background:
    var(--wp--preset--color--primary);

  border-color:
    var(--wp--preset--color--primary);
}


.sauna-tabs__panels {
  padding:
    clamp(1.5rem, 4vw, 3rem);

  background: #fff;

  border-radius: 28px;

  box-shadow:
    0 22px 60px
    rgba(28, 28, 28, 0.06);
}


.sauna-panel {
  animation: none;
}


.sauna-panel[hidden] {
  display: none;
}


/* =========================================================
   11. CONTENUTO TAB
   ========================================================= */

.sauna-content {
  max-width: 880px;
}


.sauna-content > * + * {
  margin-top: 1.1rem;
}


.sauna-content p {
  color:
    rgba(28, 28, 28, 0.76);

  font-size: 1.05rem;

  line-height: 1.75;
}


.sauna-longdesc {
  max-width: 880px;

  margin-bottom:
    clamp(2.5rem, 5vw, 4rem);

  color:
    rgba(28, 28, 28, 0.76);
}


/* =========================================================
   12. SEZIONI INTERNE
   ========================================================= */

.sauna-detail-section + .sauna-detail-section {
  margin-top:
    clamp(3rem, 5vw, 4.5rem);
}


.sauna-section-title {
  margin:
    0
    0
    1.35rem;

  padding: 0;

  border: 0;

  font-size:
    clamp(1.9rem, 3vw, 2.8rem);

  line-height: 1.05;
}


/* =========================================================
   13. TABELLA VARIANTI
   ========================================================= */

.sauna-table-wrap {
  width: 100%;

  overflow-x: auto;

  background: #fff;

  border:
    1px solid
    rgba(28, 28, 28, 0.08);

  border-radius: 22px;
}


.sauna-table {
  width: 100%;

  min-width: 680px;

  margin: 0;

  border-collapse: collapse;

  background: #fff;
}


.sauna-table th {
  padding:
    0.9rem
    1rem;

  color:
    rgba(28, 28, 28, 0.56);

  background:
    var(--wp--preset--color--soft);

  border-bottom:
    1px solid
    rgba(28, 28, 28, 0.08);

  font-size: 0.76rem;

  font-weight: 750;

  letter-spacing: 0.05em;

  text-align: left;

  text-transform: uppercase;
}


.sauna-table td {
  padding:
    1rem;

  color:
    rgba(28, 28, 28, 0.74);

  border-bottom:
    1px solid
    rgba(28, 28, 28, 0.065);

  line-height: 1.5;

  vertical-align: middle;
}


.sauna-table tbody tr:last-child td {
  border-bottom: 0;
}


.sauna-table tbody tr {
  transition:
    background-color 0.16s ease;
}


.sauna-table tbody tr:hover {
  background:
    rgba(198, 140, 72, 0.045);
}


.sauna-table-price {
  color:
    var(--wp--preset--color--dark);

  font-weight: 750;
}


.sauna-table-tax {
  display: inline-block;

  margin-left: 0.35rem;

  color:
    rgba(28, 28, 28, 0.55);

  font-size: 0.76rem;

  font-weight: 650;

  white-space: nowrap;
}


.sauna-note {
  display: inline-block;

  margin-left: 0.35rem;

  color:
    rgba(28, 28, 28, 0.55);

  font-size: 0.8rem;

  line-height: 1.3;
}


/* =========================================================
   14. FEATURE / ACCESSORY CARDS
   ========================================================= */

.sauna-feature-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0.75rem;

  margin: 0;

  padding: 0;

  list-style: none;
}


.sauna-feature-card {
  position: relative;

  margin: 0;

  padding:
    1rem
    1rem
    1rem
    2.7rem;

  color:
    rgba(28, 28, 28, 0.74);

  background:
    var(--wp--preset--color--soft);

  border:
    1px solid
    rgba(28, 28, 28, 0.065);

  border-radius: 16px;

  line-height: 1.5;

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}


.sauna-feature-card::before {
  content: "✓";

  position: absolute;

  left: 1rem;
  top: 0.95rem;

  color:
    var(--wp--preset--color--primary);

  font-weight: 800;
}


.sauna-feature-card:hover {
  background:
    rgba(198, 140, 72, 0.07);

  border-color:
    rgba(198, 140, 72, 0.20);

  transform:
    translateY(-1px);
}


/* =========================================================
   15. CONSUMI
   ========================================================= */

.sauna-consumption-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1px;

  overflow: hidden;

  margin: 0;

  padding: 0;

  background:
    rgba(28, 28, 28, 0.08);

  border:
    1px solid
    rgba(28, 28, 28, 0.08);

  border-radius: 22px;

  list-style: none;
}


.sauna-consumption-item {
  display: grid;

  gap: 0.35rem;

  margin: 0;

  padding: 1rem;

  background: #fff;
}


.sauna-consumption-item__label {
  color:
    rgba(28, 28, 28, 0.55);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.sauna-consumption-item__value {
  color:
    var(--wp--preset--color--dark);

  font-size: 0.98rem;

  font-weight: 600;

  line-height: 1.5;
}


/* =========================================================
   16. GUTENBERG AGGIUNTIVO
   ========================================================= */

.sauna-landing {
  margin-top:
    clamp(4rem, 7vw, 6rem);
}


.sauna-landing > * {
  max-width:
    var(--wp--style--global--content-size);

  margin-inline: auto;
}


.sauna-landing > .alignwide {
  max-width:
    var(--wp--style--global--wide-size);
}


.sauna-landing > .alignfull {
  max-width: none;
}


.sauna-landing h2 {
  margin-top:
    clamp(3rem, 6vw, 5rem);

  font-size:
    clamp(2.2rem, 4.2vw, 4rem);

  line-height: 1.05;
}


.sauna-landing p,
.sauna-landing li {
  color:
    rgba(28, 28, 28, 0.74);

  line-height: 1.8;
}


.sauna-landing img {
  border-radius: 24px;
}


/* =========================================================
   17. CTA ANCHOR
   ========================================================= */

.sauna-form-anchor {
  scroll-margin-top:
    calc(var(--header-h) + 2rem);
}


/* =========================================================
   18. RESPONSIVE — TABLET
   ========================================================= */

@media (min-width: 1101px) {

  .sauna-hero .ks-gallery__main {
    transform:
      translateY(-6px);
  }

}


@media (max-width: 1100px) {

  .sauna-hero {
    grid-template-columns: 1fr;
  }


  .sauna-hero__info {
    max-width: 760px;
  }


  .sauna-specs__grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


/* =========================================================
   19. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sauna-single {
    padding:
      calc(
        var(--header-h)
        + 1.5rem
      )
      0
      4rem;
  }


  .sauna-single::before,
  .sauna-hero__media::before {
    display: none;
  }


  .sauna-single > .container {
    width:
      min(100%, 92vw);
  }


  .sauna-breadcrumbs-wrap {
    margin-bottom: 1.5rem;
  }


  .sauna-hero {
    gap: 2rem;

    margin-bottom: 3rem;
  }


  .sauna-title {
    font-size:
      clamp(2.6rem, 15vw, 4.2rem);
  }


  .sauna-documents {
    max-width: none;
  }


  .sauna-document-link {
    width: 100%;
  }


  .sauna-specs {
    padding: 1.25rem;

    border-radius: 24px;
  }


  .sauna-specs__grid {
    grid-template-columns: 1fr;
  }


  .sauna-spec:hover {
    transform: none;

    box-shadow: none;
  }


  .sauna-tabs__nav {
    display: grid;

    grid-template-columns: 1fr;
  }


  .sauna-tab {
    width: 100%;
  }


  .sauna-tabs__panels {
    padding: 1.25rem;

    border-radius: 22px;
  }


  .sauna-feature-grid,
  .sauna-consumption-list {
    grid-template-columns: 1fr;
  }


  .sauna-hero .ks-gallery__main {
    border-radius: 22px;
  }


  .sauna-hero__image {
    border-radius: 22px;
  }

}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sauna-type__pill,
  .sauna-cta__button,
  .sauna-document-link,
  .sauna-spec,
  .sauna-tab,
  .sauna-table tbody tr,
  .sauna-feature-card {
    transition: none;
  }


  .sauna-type__pill:hover,
  .sauna-cta__button:hover,
  .sauna-document-link:hover,
  .sauna-spec:hover,
  .sauna-tab:hover,
  .sauna-feature-card:hover {
    transform: none;
  }


  .sauna-hero .ks-gallery__main {
    transform: none;
  }

}