/* ==========================================================================
   psa.it — tema clinico neutro (2026)
   Componenti medici: hero-med, bento, author-box, lead-cta, article-*.
   Palette: blu clinico / teal — slegato da VCN.
   ========================================================================== */

/* Disabilita custom cursor (non usato su psa.it) */
.cursor, .cursor-dot { display: none !important; }
body, body * { cursor: auto !important; }
a, button, [role="button"], .btn, [data-cursor] { cursor: pointer !important; }
input, textarea, [contenteditable] { cursor: text !important; }

/* Rimuove goccia calcare-legacy dal logo (se presente) */
.site-logo::before { display: none !important; }

/* ==========================================================================
   REVEAL on-scroll (home IntersectionObserver)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HERO MEDICO — pulito, istituzionale
   ========================================================================== */
.hero-med {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Sfondo: gradiente clinico leggero */
.hero-med::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 100% -10%, oklch(from var(--c-sage-soft) l c h / .9) 0%, transparent 65%),
    radial-gradient(55vw 55vh at -5% 100%, oklch(from var(--c-peach-soft) l c h / .7) 0%, transparent 60%);
}

.hero-med__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-strong);
  background: var(--c-accent-soft);
  border: 1px solid oklch(from var(--c-accent) l c h / .18);
  border-radius: var(--radius-pill);
  padding: .35rem .9rem;
  margin-bottom: 1.25rem;
}
.hero-med__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.hero-med__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw + .5rem, 3.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--c-fg);
  margin-bottom: 1rem;
  max-width: 22ch;
}
.hero-med__title em {
  font-style: italic;
  color: var(--c-accent-strong);
  font-weight: 400;
}

.hero-med__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw + .7rem, 1.2rem);
  color: var(--c-fg-soft);
  max-width: 58ch;
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   SECTION HEAD — intestazione sezione con link "vedi tutti"
   ========================================================================== */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--c-line);
}
.section-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw + .6rem, 2rem);
}
.section-head a {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-accent-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  transition: background var(--t-fast), gap var(--t-base);
}
.section-head a:hover {
  gap: .6rem;
  background: oklch(from var(--c-accent-soft) calc(l - .025) c h);
}

/* ==========================================================================
   BENTO GRID — griglia hub-and-spoke (home)
   ========================================================================== */
.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
  margin-block: var(--space-sm) var(--space-lg);
}
@media (max-width: 960px) { .bento { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .bento { grid-template-columns: 1fr; } }

.bento__cell {
  position: relative;
  background: oklch(from var(--c-card) l c h / .85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  text-decoration: none;
  color: var(--c-fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.bento__cell::before {
  content: '';
  position: absolute;
  inset: -50% auto auto -30%;
  width: 65%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-sage-soft), transparent 65%);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t-base);
}
.bento__cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: oklch(from var(--c-accent) l c h / .3);
  text-decoration: none;
}
.bento__cell:hover::before { opacity: 1; }

/* Span modifiers */
.bento__cell--wide  { grid-column: span 4; }
.bento__cell--med   { grid-column: span 3; }
.bento__cell--small { grid-column: span 2; }
.bento__cell--tall  { grid-row: span 2; }
@media (max-width: 960px) {
  .bento__cell--wide  { grid-column: span 3; }
  .bento__cell--med   { grid-column: span 3; }
  .bento__cell--small { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento__cell--wide,
  .bento__cell--med,
  .bento__cell--small { grid-column: span 2; }
  .bento__cell--tall  { grid-row: auto; }
}
@media (max-width: 400px) {
  .bento__cell--wide,
  .bento__cell--med,
  .bento__cell--small { grid-column: span 1; }
}

.bento__eyebrow {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-accent-strong);
  margin-bottom: .5rem;
}
.bento__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin-bottom: .6rem;
  color: var(--c-fg);
}
.bento__title em { font-style: italic; color: var(--c-accent-strong); font-weight: 400; }

.bento__desc {
  color: var(--c-fg-soft);
  font-size: .9rem;
  line-height: 1.55;
  flex: 1;
}
.bento__cta {
  margin-top: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-accent-strong);
  transition: gap var(--t-base);
}
.bento__cell:hover .bento__cta { gap: .6rem; }

/* Numeri grandi decorativi nelle celle stat */
.bento__big-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--c-accent-strong);
  opacity: .85;
  font-style: italic;
}
.bento__big-num + .bento__small-label {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--c-fg-soft);
  letter-spacing: .03em;
  margin-top: .5rem;
}

/* ==========================================================================
   AUTHOR BOX — byline + revisore clinico
   ========================================================================== */
.author-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem .9rem;
  padding: .75rem 1rem;
  background: oklch(from var(--c-bg-soft) l c h / .8);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-sm);
  margin-block: var(--space-sm);
  font-family: var(--font-body);
  font-size: .85rem;
}
.author-box__main {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.author-box__by {
  color: var(--c-fg-soft);
}
.author-box__by a {
  color: var(--c-fg);
  text-decoration: none;
  font-weight: 600;
}
.author-box__by a:hover { color: var(--c-accent-strong); }

.author-box__rev {
  font-size: .8rem;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.author-box__rev::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-ok);
  flex-shrink: 0;
}
.author-box__rev strong { color: var(--c-fg-soft); }

.author-box__date {
  font-size: .78rem;
  color: var(--c-muted);
  white-space: nowrap;
}

/* ==========================================================================
   LEAD CTA — call to action card (mid/end articolo)
   ========================================================================== */
.lead-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  background: linear-gradient(135deg,
    oklch(from var(--c-sage-soft) l c h / .7),
    oklch(from var(--c-peach-soft) l c h / .55));
  border: 1px solid oklch(from var(--c-accent) l c h / .2);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-block: var(--space-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lead-cta::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 45%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-sage-soft), transparent 65%);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.lead-cta__body {
  flex: 1 1 240px;
  min-width: 0;
}
.lead-cta__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--c-fg);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.lead-cta__sub {
  font-size: .9rem;
  color: var(--c-fg-soft);
  line-height: 1.5;
  margin: 0;
}
.lead-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--c-accent-strong);
  color: #fff;
  padding: .75rem 1.35rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--t-fast), transform var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
  box-shadow: 0 4px 14px oklch(from var(--c-accent-strong) l c h / .3);
}
.lead-cta__btn:hover {
  background: var(--c-sage-strong);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px oklch(from var(--c-accent-strong) l c h / .35);
  text-decoration: none;
  color: #fff;
}
.lead-cta__btn:active { transform: translateY(0); }

/* ==========================================================================
   ARTICLE SOURCES — lista riferimenti bibliografici
   ========================================================================== */
.article-sources {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
}
.article-sources h2 {
  font-size: 1.2rem;
  color: var(--c-fg-soft);
  margin-bottom: 1rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.article-sources h2::before {
  content: '';
  display: inline-block;
  width: 20px; height: 3px;
  background: var(--c-accent-strong);
  border-radius: 2px;
  flex-shrink: 0;
}

.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  counter-reset: src;
}
.sources-list li {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--c-fg-soft);
  line-height: 1.55;
  padding-left: 1.75rem;
  position: relative;
  counter-increment: src;
}
.sources-list li::before {
  content: counter(src) '.';
  position: absolute;
  left: 0;
  top: .05em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-accent-strong);
  min-width: 1.25rem;
}
.sources-list li a {
  color: var(--c-accent-strong);
  word-break: break-all;
}
.sources-list li a:hover { color: var(--c-accent); }

/* ==========================================================================
   ARTICLE RELATED — correlati hub-and-spoke
   ========================================================================== */
.article-related {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--c-line-soft);
}
.article-related h2 {
  font-size: 1.15rem;
  color: var(--c-fg-soft);
  margin-bottom: .85rem;
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.related-list li {
  background: oklch(from var(--c-card) l c h / .7);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.related-list li:hover {
  border-color: oklch(from var(--c-accent) l c h / .3);
  background: var(--c-accent-soft);
}
.related-list li a {
  display: block;
  padding: .6rem .85rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-fg-soft);
  text-decoration: none;
  line-height: 1.45;
}
.related-list li:hover a { color: var(--c-accent-strong); }

/* ==========================================================================
   ARTICLE LAYOUT — breadcrumb, meta, faq, footer, body overrides
   ========================================================================== */

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--c-muted);
  margin-bottom: .75rem;
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb a {
  color: var(--c-fg-soft);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--c-accent-strong); }

/* Article meta (lettura minuti) */
.article-meta {
  font-family: var(--font-body);
  font-size: .83rem;
  color: var(--c-muted);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: .25rem 0 0;
}

/* Article body font-variation reset (Source Serif 4 non ha asse SOFT) */
.article-body {
  font-size: 1.06rem;
  line-height: 1.8;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Tabella responsiva mobile */
@media (max-width: 640px) {
  .article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
  }
  .article-body th,
  .article-body td {
    white-space: normal;
    min-width: 8rem;
  }
}

/* FAQ */
.article-faq {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
}
.article-faq h2 { margin-bottom: 1.25rem; }
.article-faq details {
  border-bottom: 1px solid var(--c-line-soft);
  padding: 1.1rem 0;
}
.article-faq details:first-of-type { border-top: 1px solid var(--c-line-soft); }
.article-faq details[open] {
  background: oklch(from var(--c-accent-soft) l c h / .4);
  border-radius: var(--radius-sm);
  padding-inline: 1rem;
}
.article-faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-fg);
  list-style: none;
  position: relative;
  padding-right: 2.2rem;
  line-height: 1.45;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: '+';
  position: absolute; right: 0; top: -.1rem;
  font-size: 1.5rem;
  color: var(--c-accent-strong);
  font-weight: 300;
  transition: transform var(--t-base);
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  background: var(--c-accent-soft);
  border-radius: 50%;
}
.article-faq details[open] summary::after { transform: rotate(45deg); }
.article-faq details p {
  margin-top: .85rem;
  color: var(--c-fg-soft);
  line-height: 1.7;
  font-size: .97rem;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (prefers-reduced-motion: reduce) {
  .article-faq summary::after { transition: none; }
}

/* Article footer — disclaimer medico */
.article-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
}
.article-footer__disclaimer {
  font-size: .85rem;
  color: var(--c-fg-soft);
  line-height: 1.65;
  background: oklch(from var(--c-bg-soft) l c h / .85);
  padding: 1rem 1.2rem 1rem 1.4rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--c-accent);
}
.article-footer__disclaimer a { color: var(--c-accent-strong); }
.article-footer__disclaimer strong { color: var(--c-fg); }

/* Article products section */
.article-products {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--c-line-soft);
}

/* Product box CTA — colore clinico */
.product-box__cta {
  background: var(--c-accent-strong);
  color: #fff;
}
.product-box__cta:hover {
  background: var(--c-sage-strong);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .lead-cta, .cookie-banner, .cookie-btn, .site-nav { display: none !important; }
  .article-body { font-size: 12pt; line-height: 1.6; }
  .article-footer__disclaimer { border: 1px solid #ccc; }
}