/* =========================================================================== the gym's own page
   grynta.it/<gym>/ (viste/vetrina) and «La palestra» of the members' app (viste/m/palestra.php, persona.php): the
   members' app «Performance» look (body.ma tokens: dark like a weight room, the gym's accent the only light, Oswald for
   the big athletic type, Archivo for reading). The first screen is the door's: the gym's photo, its mark, two big
   lines. Below, the activities and the staff as dark cards; they come in one after the other, the page's only motion.
   Prefix vt-. Loaded only by these pages ($fogli). */

/* ------------------------------------------------------------------------------------- first screen */
.vt { flex: 1; display: block; background: var(--ferro) }
.vt-hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex;
  background: linear-gradient(180deg, rgba(10,11,18,.38) 0%, rgba(10,11,18,.1) 30%, rgba(10,11,18,.78) 62%, var(--ferro) 100%),
    var(--cover, linear-gradient(160deg, var(--brand-primary), var(--ferro) 75%)) center 25% / cover no-repeat }
.vt-hero-in { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 28px }
.vt-top { position: relative; z-index: 1 }
.vt-hero-testo { margin-top: auto; display: flex; flex-direction: column; gap: 16px }
.vt-h { font-size: clamp(50px, 14vw, 104px); overflow-wrap: anywhere }
.vt-sub { margin: 0; max-width: 46ch; color: #D9DBE6; font-size: 16.5px; line-height: 1.5 }
.vt-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
.vt-primo, .vt-secondo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; box-sizing: border-box;
  border-radius: 14px; font: 700 17px 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: transform .15s var(--ease-out), background .18s, border-color .18s }
.vt-primo { background: var(--acc); color: var(--on-acc) !important; border: 1.5px solid var(--acc) }
.vt-primo svg { width: 20px; height: 20px; transition: transform .2s var(--ease-out) }
.vt-primo:hover svg { transform: translateX(3px) }
.vt-secondo { border: 1.5px solid rgba(255,255,255,.4); background: rgba(10,11,18,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff !important }
.vt-secondo:hover { border-color: #fff }
.vt-primo:active, .vt-secondo:active { transform: scale(.97) }
.vt-salti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.vt-salti a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  color: #D9DBE6 !important; font-size: 14px; font-weight: 600; text-decoration: none }
.vt-salti a:hover { border-color: var(--acc); color: #fff !important }

/* ------------------------------------------------------------------------------------- sections */
.vt-in { max-width: 1080px; margin: 0 auto; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box }
.vt-sez { padding-top: 56px; scroll-margin-top: 12px }
.vt-h2 { margin: 0 0 18px; font: 700 clamp(36px, 9vw, 54px)/.95 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .005em }
.vt-nota { margin: -8px 0 16px; color: var(--tenue); font-size: 15px }
.vt-griglia { display: grid; gap: 14px }
.vt-griglia-att { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start }
.vt-griglia-pers { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)) }
@media (max-width: 520px) { .vt-griglia-pers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } }

/* one activity: its colour on top, the photo, the words, when, with whom */
.vt-att { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--ghisa); border: 1px solid var(--riga); border-radius: 22px;
  animation: vt-in .55s var(--ease-out) both; animation-delay: calc(.05s + var(--i, 0) * 60ms) }
.vt-att::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--acc)) }
.vt-att-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ghisa2) }
.vt-att-in { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 10px }
.vt-att h3 { margin: 0; font: 700 27px/1.02 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere }
.vt-tag { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.vt-tag li { padding: 4px 10px; border-radius: 999px; background: var(--ghisa2); color: #D9DBE6; font-size: 13px; font-weight: 600 }
.vt-tag-grande li { padding: 7px 13px; font-size: 14.5px }
.vt-att-riga { margin: 0; color: #D9DBE6; font-size: 15.5px; line-height: 1.45 }
.vt-piu summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--acc); font-weight: 700; cursor: pointer; list-style: none }
.vt-piu summary::-webkit-details-marker { display: none }
.vt-piu summary::after { content: ''; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-out) }
.vt-piu[open] summary::after { transform: translateY(2px) rotate(-135deg) }
.vt-piu p { margin: 0 0 10px; color: #D9DBE6; font-size: 15px; line-height: 1.55 }
.vt-quando { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--testo) }
.vt-quando span, .vt-con > span { color: var(--acc); font-weight: 700; margin-right: 4px }
.vt-con { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px }
.vt-con a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--ghisa2);
  text-decoration: none; font-weight: 600 }
.vt-con a:hover { box-shadow: inset 0 0 0 1.5px var(--acc) }
.vt-con img, .vt-con i { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none }
.vt-con i { display: grid; place-items: center; background: var(--ferro); color: var(--acc); font: normal 700 12px 'Archivo', sans-serif }

/* one person: the photo square, the name big */
.vt-pers { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 16px; background: var(--ghisa); border: 1px solid var(--riga); border-radius: 22px;
  text-decoration: none; transition: border-color .18s, transform .15s var(--ease-out);
  animation: vt-in .55s var(--ease-out) both; animation-delay: calc(.05s + var(--i, 0) * 60ms) }
.vt-pers:hover { border-color: var(--acc) }
.vt-pers:active { transform: scale(.98) }
.vt-pers-foto { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--ghisa2); margin-bottom: 8px }
.vt-iniziali { display: grid; place-items: center; color: var(--acc); font: 700 clamp(40px, 12vw, 64px)/1 'Oswald', sans-serif; letter-spacing: .02em }
.vt-pers-nome { padding: 0 6px; font: 700 22px/1.02 'Oswald', sans-serif; text-transform: uppercase; overflow-wrap: anywhere }
.vt-pers-tit { padding: 0 6px; color: var(--tenue); font-size: 14px; line-height: 1.35 }
.vt-pers-sp { padding: 6px 6px 0; display: flex; flex-wrap: wrap; gap: 4px }
.vt-pers-sp span { padding: 3px 8px; border-radius: 999px; background: var(--ghisa2); color: #D9DBE6; font-size: 12px; font-weight: 600 }

/* the next seven days */
.vt-giorni { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)) }
.vt-giorno { padding: 14px 12px; border-radius: 18px; background: var(--ghisa); border: 1px solid var(--riga); min-width: 0 }
.vt-giorno h3 { margin: 0 0 10px; font: 700 19px/1 'Oswald', sans-serif; text-transform: uppercase }
.vt-giorno h3 small { font: 500 13px 'Archivo', sans-serif; color: var(--tenue); text-transform: none }
.vt-giorno ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.vt-giorno li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding-left: 8px; border-left: 3px solid var(--c, var(--acc)) }
.vt-ora { font: 600 16px/1.3 'Oswald', sans-serif; font-variant-numeric: tabular-nums; color: var(--testo) }
.vt-cosa { min-width: 0 }
.vt-cosa b { display: block; font-size: 14.5px; line-height: 1.3; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto }
.vt-cosa small { display: block; color: var(--tenue); font-size: 12.5px }
.vt-giorno.vuoto { opacity: .55 }
.vt-niente { margin: 0; color: var(--tenue); font-size: 14px }

/* where and when */
.vt-dove-in { display: grid; gap: 14px }
@media (min-width: 760px) { .vt-dove-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start } }
.vt-contatti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.vt-contatti a { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-radius: 16px; background: var(--ghisa); border: 1px solid var(--riga);
  text-decoration: none; font-weight: 600; transition: border-color .18s }
.vt-contatti a:hover { border-color: var(--acc) }
.vt-contatti svg { color: var(--acc); flex: none }
.vt-contatti span { min-width: 0; overflow-wrap: anywhere; padding: 10px 0 }
.vt-orari { padding: 16px 18px; border-radius: 18px; background: var(--ghisa); border: 1px solid var(--riga) }
.vt-orari h3 { margin: 0 0 8px; font: 700 20px/1 'Oswald', sans-serif; text-transform: uppercase }
.vt-orari p { margin: 0; color: #D9DBE6; line-height: 1.6 }

/* the end: the way in again */
.vt-fine { margin-top: 64px; padding: 34px 22px; border-radius: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 22%, var(--ghisa)), var(--ghisa) 70%); border: 1px solid var(--riga) }
.vt-fine-h { font-size: clamp(38px, 10vw, 60px) }
.vt-fine p:not(.vt-fine-h) { margin: 0; color: #D9DBE6; max-width: 38ch }
.vt .ma-pw { margin-top: 28px }

/* ------------------------------------------------------------------------------------- one person, whole */
.vt-pagina .vt-in { padding-top: calc(18px + env(safe-area-inset-top, 0px)) }
.vt-profilo { padding-top: 28px; max-width: 860px }
.vt-pr-testa { display: grid; gap: 20px; align-items: end }
@media (min-width: 720px) { .vt-pr-testa { grid-template-columns: 280px minmax(0, 1fr); gap: 32px } }
.vt-pr-foto { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; border-radius: 28px; object-fit: cover; background: var(--ghisa2) }
.vt-pr-nome { font-size: clamp(46px, 12vw, 84px); overflow-wrap: anywhere }
.vt-pr-tit { margin: 10px 0 0; color: #D9DBE6; font-size: 18px; line-height: 1.4 }
.vt-pr-albo { margin: 12px 0 0; padding-left: 12px; border-left: 3px solid var(--acc); color: var(--tenue); font-size: 14px; line-height: 1.45 }
.vt-pr-bio { margin-top: 28px; max-width: 62ch }
.vt-pr-bio p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #E6E7EE }
.vt-pr-sez h2 { margin: 34px 0 14px; font: 700 26px/1 'Oswald', sans-serif; text-transform: uppercase }
.vt-cv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--riga) }
.vt-cv li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--riga) }
.vt-cv b, .vt-cv small { grid-column: 2 }
.vt-cv-anno { grid-row: span 2; font: 600 18px/1.3 'Oswald', sans-serif; color: var(--acc); font-variant-numeric: tabular-nums }
.vt-cv b { font-size: 16px; line-height: 1.35 }
.vt-cv small { color: var(--tenue); font-size: 14px }
.vt-insegna { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)) }
.vt-insegna li { padding: 12px 14px; border-radius: 16px; background: var(--ghisa); border: 1px solid var(--riga); border-left: 4px solid var(--c, var(--acc)) }
.vt-insegna a { display: block; font: 700 20px/1.1 'Oswald', sans-serif; text-transform: uppercase; text-decoration: none }
.vt-insegna small { display: block; margin-top: 4px; color: var(--tenue); font-size: 13.5px }
.vt-pr-nota { margin: 28px 0 0; color: var(--tenue); font-size: 13.5px; line-height: 1.45; max-width: 62ch }

/* ------------------------------------------------------------------------------------- inside the members' app */
.vt-app { padding: 0 16px 8px }
.vt-app .vt-sez { padding-top: 22px }
.vt-app .vt-h2 { font-size: 30px; margin-bottom: 12px }
.vt-app .vt-profilo { padding-top: 6px }
.vt-app .vt-pr-nome { font-size: clamp(42px, 13vw, 58px) }
.vt-app-su { margin: 0 0 10px }
.vt-app-su a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tenue); text-decoration: none; font-weight: 600 }

@keyframes vt-in { from { opacity: 0; transform: translateY(16px) } }
@media (prefers-reduced-motion: reduce) {
  .vt-att, .vt-pers { animation: none }
  .vt-primo, .vt-secondo, .vt-pers, .vt-primo svg, .vt-piu summary::after { transition: none }
}