/* ═══════════════════════════════════════════════════════════════════════
   calc3-card.css — Calculator Card Component (child theme calc3-quotidiano)
   Dipende da: tokens.css + calc3-tokens-restyle.css
   Estratto da OpenDesign/calc3-card-v2.html
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   RESET — scope solo dentro la card
   ═══════════════════════════════════════════════════ */

.calc3-card *,
.calc3-card *::before,
.calc3-card *::after { box-sizing: border-box; }


/* ═══════════════════════════════════════════════════
   CARD — contenitore principale
   ═══════════════════════════════════════════════════ */

.calc3-card {
  border-top: var(--rule-bold) solid var(--ink);
  border-bottom: var(--rule-bold) solid var(--ink);
  padding: var(--calc3-spacing-lg) 0;
  max-width: var(--paper-max);
}

/* Sponsor bar — nascosta di default */
.calc3-card__sponsor {
  display: none;
}


/* ═══════════════════════════════════════════════════
   MASTHEAD
   ═══════════════════════════════════════════════════ */

.calc3-card__masthead {
  margin-bottom: var(--calc3-spacing-xl);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  padding-bottom: var(--calc3-spacing-lg);
}
.calc3-card__eyebrow {
  font-size: var(--t-occhiello);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rosso);
  margin: 0 0 var(--calc3-spacing-sm);
  font-weight: 500;
}
.calc3-card__title {
  font-size: var(--t-titolo);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--calc3-spacing-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.calc3-card__lead {
  font-size: var(--t-sommario);
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 var(--calc3-spacing-sm);
  max-width: 65ch;
  line-height: 1.5;
}
.calc3-card__byline {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   CARD BODY — contiene form + result
   ═══════════════════════════════════════════════════ */

.calc3-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--calc3-spacing-lg);
  padding-bottom: 5rem; /* spazio per bottom-sheet mobile */
}


/* ═══════════════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════════════ */

.calc3-form {
  display: flex;
  flex-direction: column;
  gap: var(--calc3-spacing-md);
  max-width: var(--calc3-container-calculator);
}

.calc3-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--calc3-spacing-md);
}
.calc3-form__row > * {
  min-width: 0;
}

/* Campo singolo */
.calc3-field {
  display: flex;
  flex-direction: column;
}
.calc3-field__label {
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: var(--calc3-spacing-xs);
}
.calc3-field__input {
  display: block;
  width: 100%;
  min-height: var(--calc3-touch-target);
  font-family: var(--font);
  font-size: var(--t-corpo);
  color: var(--ink);
  background: var(--paper-bright);
  border: var(--rule-hair) solid var(--ink-faint);
  border-radius: 0;
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-md);
  transition: border-color 0.15s;
}
.calc3-field__input:focus {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
  border-color: var(--rosso);
}
.calc3-field__hint {
  font-size: var(--t-didascalia);
  font-style: italic;
  color: var(--ink-faint);
  margin-top: var(--calc3-spacing-xs);
}

/* Select custom */
.calc3-field__select-wrap {
  position: relative;
}
.calc3-field__select-wrap::after {
  content: '';
  position: absolute;
  right: var(--calc3-spacing-md);
  top: 50%;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
select.calc3-field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--calc3-spacing-xl);
  cursor: pointer;
}

/* Errore */
.calc3-field--error .calc3-field__input {
  border-color: var(--calc3-color-danger);
  border-width: 2px;
}
.calc3-field__error {
  font-size: var(--t-didascalia);
  color: var(--calc3-color-danger);
  margin-top: var(--calc3-spacing-xs);
  font-weight: 500;
}

/* Azioni form (bottone) */
.calc3-form__actions {
  padding-top: var(--calc3-spacing-xs);
}


/* ═══════════════════════════════════════════════════
   BOTTONE
   ═══════════════════════════════════════════════════ */

.calc3-btn {
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  font-weight: 700;
  min-height: var(--calc3-touch-target);
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-xl);
  border: var(--rule-thin) solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
  display: inline-block;
}
.calc3-btn--primary {
  background: var(--rosso);
  color: var(--paper);
  border-color: var(--rosso-deep);
  box-shadow: var(--calc3-shadow-brutal-md);
}
.calc3-btn--primary:hover {
  background: var(--rosso-deep);
}
.calc3-btn--primary:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}
.calc3-btn--primary:active {
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}


/* ═══════════════════════════════════════════════════
   RESULT PANEL — in card-context (bottom-sheet mobile)
   ═══════════════════════════════════════════════════ */

.calc3-card .calc3-result {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--paper);
  border-top: var(--rule-bold) solid var(--ink);
  box-shadow: 0 -4px 0 var(--ink);
}

.calc3-card .calc3-result__header {
  font-size: var(--t-occhiello);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 var(--calc3-spacing-md);
  padding-bottom: var(--calc3-spacing-xs);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  font-weight: 500;
}

/* Stato vuoto */
.calc3-card .calc3-result__empty {
  font-style: italic;
  color: var(--ink-muted);
  font-size: var(--t-corpo);
  padding: var(--calc3-spacing-lg) 0;
}

/* Toggle mobile (bottom-sheet) */
.calc3-result__toggle {
  display: flex;
  width: 100%;
  min-height: var(--calc3-touch-target);
  justify-content: space-between;
  align-items: center;
  padding: var(--calc3-spacing-sm) var(--calc3-spacing-md);
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--t-corpo-sm);
  color: var(--ink);
  cursor: pointer;
  gap: var(--calc3-spacing-sm);
  text-align: left;
}
.calc3-result__toggle-label {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.calc3-result__toggle-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 1;
  text-align: right;
}
.calc3-result__toggle-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--ink);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.calc3-result[data-expanded="true"] .calc3-result__toggle-chevron {
  transform: rotate(180deg);
}

/* Body dei risultati — collassato su mobile */
.calc3-card .calc3-result__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 var(--calc3-spacing-md);
}
.calc3-card .calc3-result[data-expanded="true"] .calc3-result__body {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: var(--calc3-spacing-lg);
}

/* Singolo risultato — layout orizzontale (card-context) */
.calc3-card .calc3-result__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--calc3-spacing-sm) 0;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  gap: var(--calc3-spacing-sm);
}
.calc3-card .calc3-result__item:last-child {
  border-bottom: none;
}
.calc3-card .calc3-result__label {
  font-size: var(--t-corpo-sm);
  color: var(--ink-muted);
  flex-shrink: 0;
}
.calc3-card .calc3-result__value {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Risultato primario — layout verticale, enfatizzato */
.calc3-card .calc3-result__item--primary {
  display: block;
  border-bottom: var(--rule-bold) solid var(--ink);
  padding-bottom: var(--calc3-spacing-md);
  margin-bottom: var(--calc3-spacing-xs);
}
.calc3-card .calc3-result__item--primary .calc3-result__label {
  display: block;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--calc3-spacing-xs);
}
.calc3-card .calc3-result__item--primary .calc3-result__value {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════
   GAUGE / METER — lineare in card-context
   ═══════════════════════════════════════════════════ */

.calc3-card .calc3-gauge {
  margin: var(--calc3-spacing-md) 0;
}
.calc3-card .calc3-gauge__track {
  position: relative;
  height: 12px;
  background: linear-gradient(to right,
    var(--calc3-gauge-zone-low),
    var(--calc3-gauge-zone-mid),
    var(--calc3-gauge-zone-high)
  );
  border: var(--rule-hair) solid var(--ink-faint);
}
.calc3-card .calc3-gauge__marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: calc(100% + 8px);
  background: var(--ink);
  transform: translateX(-50%);
}
.calc3-card .calc3-gauge__labels {
  display: flex;
  margin-top: var(--calc3-spacing-xs);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.calc3-card .calc3-gauge__labels span {
  text-align: center;
  line-height: 1.3;
}
/* Proporzioni delle fasce BMI: 15–18.5 / 18.5–25 / 25–30 / 30–40 */
.calc3-card .calc3-gauge__labels span:nth-child(1) { flex: 3.5; }
.calc3-card .calc3-gauge__labels span:nth-child(2) { flex: 6.5; }
.calc3-card .calc3-gauge__labels span:nth-child(3) { flex: 5; }
.calc3-card .calc3-gauge__labels span:nth-child(4) { flex: 10; }


/* ═══════════════════════════════════════════════════
   STATI
   ═══════════════════════════════════════════════════ */

/* Loading skeleton */
.calc3-card .calc3-result--loading .calc3-result__value {
  background: linear-gradient(90deg,
    var(--paper-shade) 25%,
    var(--paper-bright) 50%,
    var(--paper-shade) 75%
  );
  background-size: 200% 100%;
  animation: calc3-skeleton 1.5s ease-in-out infinite;
  color: transparent;
  min-width: 6em;
  display: inline-block;
}
@keyframes calc3-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes calc3-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════
   VARIANTI
   ═══════════════════════════════════════════════════ */

/* Compact — padding ridotto */
.calc3-card--compact {
  padding: var(--calc3-spacing-md) 0;
}
.calc3-card--compact .calc3-card__masthead {
  margin-bottom: var(--calc3-spacing-md);
  padding-bottom: var(--calc3-spacing-sm);
}
.calc3-card--compact .calc3-form {
  gap: var(--calc3-spacing-sm);
}

/* Rich — result area espansa */
.calc3-card--rich .calc3-result__item--primary .calc3-result__value {
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Commercial — barra sponsor visibile */
.calc3-card--commercial .calc3-card__sponsor {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--calc3-spacing-sm);
  padding: var(--calc3-spacing-xs) var(--calc3-spacing-md);
  background: var(--rosso-tint);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: var(--calc3-spacing-md);
  border-bottom: var(--rule-hair) solid var(--rosso);
}
.calc3-card__sponsor-tag {
  font-weight: 500;
}
.calc3-card__sponsor-link {
  color: var(--rosso);
  text-decoration: none;
  font-weight: 500;
}
.calc3-card__sponsor-link:hover {
  color: var(--rosso-deep);
  text-decoration: underline;
}

/* Embed — senza masthead, bordo completo */
.calc3-card--embed .calc3-card__masthead {
  display: none;
}
.calc3-card--embed {
  border: var(--rule-thin) solid var(--ink-faint);
  padding: var(--calc3-spacing-md);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — form row 2-col ≥ 480px
   ═══════════════════════════════════════════════════ */

@media (min-width: 480px) {
  .calc3-form__row--2col {
    grid-template-columns: 1fr 1fr;
  }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET ≥ 768px
   result come card flottante, bottom-sheet disattivato
   ═══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .calc3-card {
    padding: var(--calc3-spacing-xl) 0;
  }
  .calc3-card__body {
    padding-bottom: 0;
  }
  .calc3-card .calc3-result {
    position: static;
    box-shadow: var(--calc3-shadow-brutal-md);
    padding: var(--calc3-spacing-lg);
    background: var(--paper-bright);
    border: var(--rule-hair) solid var(--ink-faint);
    border-top: var(--rule-bold) solid var(--ink);
  }
  .calc3-result__toggle {
    display: none;
  }
  .calc3-card .calc3-result__body {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — DESKTOP ≥ 1024px
   grid 2 colonne, result panel sticky + rule verticale
   ═══════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .calc3-card__body {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--calc3-spacing-xl);
    align-items: start;
  }
  .calc3-card__body > * {
    min-width: 0;
  }
  .calc3-card .calc3-result {
    position: sticky;
    top: var(--calc3-spacing-xl);
    align-self: start;
    box-shadow: none;
    background: transparent;
    border: none;
    border-inline-start: var(--rule-thin) solid var(--ink-faint);
    padding: 0;
    padding-inline-start: var(--calc3-spacing-xl);
  }

  /* Embed su desktop: niente sticky, niente rule */
  .calc3-card--embed .calc3-result {
    border-inline-start: none;
    padding-inline-start: var(--calc3-spacing-lg);
  }
}


/* ═══════════════════════════════════════════════════
   MOBILE BOTTOM-SHEET — escape hatch
   data-mobile-summary="off" disattiva il bottom-sheet
   ═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .calc3-card[data-mobile-summary="off"] .calc3-result {
    position: static;
    border-top: var(--rule-bold) solid var(--ink);
    box-shadow: none;
    padding: var(--calc3-spacing-md);
    background: var(--paper-bright);
  }
  .calc3-card[data-mobile-summary="off"] .calc3-result__toggle {
    display: none;
  }
  .calc3-card[data-mobile-summary="off"] .calc3-result__body {
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .calc3-card[data-mobile-summary="off"] .calc3-card__body {
    padding-bottom: 0;
  }
}