/* =====================================================================
   Odontekne — sezioni delle singole pagine.
   Tutte usano la stessa griglia a 12 colonne, con proporzioni diverse.
   ===================================================================== */

.hero-grid,.about-grid,.services-grid,.tools-grid,.teaser,.page-hero--media .wrap,.catalog-item,.goal,.form-layout,.login-layout,.simple-page .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);}

/* ---------- Home: apertura ---------- */
.hero{padding-block:clamp(40px,6vw,96px) clamp(72px,9vw,136px);}
.hero-grid{align-items:center;}
.hero-copy{grid-column:1 / span 7;}
.hero h1{max-width:11ch;}
.hero .lead{margin-top:28px;}
.hero .btn-row{margin-top:40px;}
.hero-art{grid-column:8 / -1;}
@media (max-width:900px){
  .hero-copy,.hero-art{grid-column:1 / -1;}
  .hero-art{width:100%;max-width:420px;margin-top:48px;}
}

/* ---------- Home: chi siamo ---------- */
.about{padding-top:0;}
.about-grid{row-gap:36px;align-items:start;}
.about-media{grid-column:1 / span 7;}
.about-media img{aspect-ratio:16 / 9;}
.about-text{grid-column:8 / -1;padding-left:clamp(0px,2vw,24px);}
.about-text p + p{margin-top:16px;}
.about-text .spec-list{margin-top:32px;}
@media (max-width:900px){.about-media,.about-text{grid-column:1 / -1;}.about-text{padding-left:0;}}

/* ---------- Home: indice delle lavorazioni ---------- */
.services-grid{row-gap:48px;align-items:start;}
.services-head{grid-column:1 / span 4;grid-row:1 / span 2;position:sticky;top:calc(var(--header-h) + 40px);}
.services-head h2{font-size:clamp(1.95rem,1.3rem + 1.9vw,2.8rem);}
.services-head .lead{margin-top:20px;font-size:1.05rem;}
.index{grid-column:6 / -1;margin:0;border-top:1px solid var(--ink);}
.services-grid .stl{grid-column:6 / -1;}
.index li{border-bottom:1px solid rgba(27,43,69,.2);}
.index-row{display:grid;grid-template-columns:2.8rem minmax(0,15.5rem) minmax(0,1fr) 24px;gap:6px 24px;align-items:baseline;padding:22px 0;color:var(--ink);text-decoration:none;}
.index-num{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.index-title{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem);line-height:1.15;transition:color var(--duration-quick) var(--ease-smooth-out);}
.index-text{font-size:.96rem;color:var(--ink-soft);}
.index-go{align-self:center;color:var(--action);transform:translateX(-4px);transition:transform var(--duration-fast) var(--ease-smooth-out);}
.index-go svg{width:22px;height:22px;}
@media (hover:hover) and (pointer:fine){
  .index-row:hover .index-title{color:var(--action);}
  .index-row:hover .index-go{transform:translateX(0);}
}
/* al tocco, sul telefono: il titolo conferma subito la scelta */
.index-row:active .index-title{color:var(--action);}
@media (max-width:1180px){
  .index-row{grid-template-columns:2.4rem minmax(0,1fr) 24px;}
  .index-title{grid-column:2;}
  .index-text{grid-column:2;grid-row:2;}
  .index-go{grid-column:3;grid-row:1;}
}
@media (max-width:900px){
  .services-head,.index,.services-grid .stl{grid-column:1 / -1;grid-row:auto;position:static;}
}

/* ---------- Home: strumenti ---------- */
.tools-grid{align-items:start;}
.tools-media{grid-column:1 / span 5;position:sticky;top:calc(var(--header-h) + 40px);}
.tools-media img{aspect-ratio:4 / 5;}
.tools-body{grid-column:7 / -1;}
.tools-body .lead{margin-top:20px;}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-top:40px;border-top:1px solid var(--ink);}
.tools > div{padding:18px 0 20px;border-bottom:1px solid var(--line);}
.tools dt{font-weight:600;}
.tools dd{margin-top:6px;font-size:.95rem;color:var(--ink-soft);}
.formats{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-top:32px;}
.formats p{color:var(--ink-soft);}
@media (max-width:900px){
  .tools-media,.tools-body{grid-column:1 / -1;position:static;}
  .tools-media img{aspect-ratio:4 / 3;}
  .tools-body{margin-top:48px;}
}
@media (max-width:620px){.tools{grid-template-columns:1fr;}}

/* ---------- Home: formazione ---------- */
.teaser{align-items:center;}
.teaser-media{grid-column:1 / span 6;padding:clamp(16px,3vw,40px);background:var(--white);}
.teaser-text{grid-column:8 / -1;}
.teaser-text p:not(.eyebrow){margin-top:16px;color:var(--ink-soft);}
.teaser-text .btn{margin-top:28px;}
@media (max-width:900px){.teaser-media,.teaser-text{grid-column:1 / -1;}.teaser-text{margin-top:32px;}}

/* ---------- Lavorazioni ---------- */
.page-hero--media .wrap{align-items:end;}
.ph-copy{grid-column:1 / span 7;}
.ph-media{grid-column:9 / -1;}
.ph-media img{aspect-ratio:4 / 5;}
@media (max-width:900px){
  .ph-copy,.ph-media{grid-column:1 / -1;}
  .ph-media{margin-top:40px;}
  .ph-media img{aspect-ratio:4 / 3;}
}
.catalog{margin:0;}
.catalog-item:first-child{padding-top:0;}
.catalog-item{position:relative;align-items:baseline;row-gap:12px;padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--line);}
.catalog-num{grid-column:1;font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.catalog-title{grid-column:2 / span 4;font-size:var(--fs-h3);}
.catalog-text{grid-column:6 / span 4;color:var(--ink-soft);}
.catalog-go{grid-column:10 / -1;justify-self:end;}
.catalog-item:target::before{content:"";position:absolute;left:calc(var(--gutter) * -1 + 4px);top:-1px;bottom:-1px;width:6px;background:var(--red);animation:target-bar 500ms 150ms var(--ease-smooth-out) both;}
/* arrivando da un link (es. dalla home) la barra rossa "disegna" la lavorazione scelta */
@keyframes target-bar{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0);}}
.catalog-item--open .sq{background:var(--yellow);outline:1px solid var(--ink);outline-offset:-1px;}
@media (max-width:900px){
  .catalog-item{grid-template-columns:2.4rem minmax(0,1fr);}
  .catalog-title,.catalog-text,.catalog-go{grid-column:2;justify-self:start;}
}

/* ---------- Obiettivi ---------- */
.goal{row-gap:28px;align-items:start;padding-block:clamp(40px,5vw,80px);border-top:1px solid var(--ink);}
.goal:first-child{padding-top:0;border-top:0;}
.goal-text{grid-column:1 / span 4;grid-row:1;}
.goal-media{grid-column:6 / -1;grid-row:1;}
.goal:nth-child(2) .goal-text{grid-column:9 / -1;}
.goal:nth-child(2) .goal-media{grid-column:1 / span 7;}
.goal--red{--accent:var(--red);}
.goal--yellow{--accent:var(--yellow);}
.goal--blue{--accent:var(--blue);}
.goal-num{display:flex;align-items:center;gap:12px;font-size:.82rem;font-weight:600;letter-spacing:.1em;color:var(--ink-soft);}
.goal h2{margin-top:20px;}
.goal-text p:not(.goal-num){margin-top:16px;max-width:40ch;font-size:1.06rem;color:var(--ink-soft);}
.goal-media img{aspect-ratio:16 / 10;}
@media (max-width:900px){
  .goal-text,.goal-media,.goal:nth-child(2) .goal-text,.goal:nth-child(2) .goal-media{grid-column:1 / -1;grid-row:auto;}
}

/* ---------- Formazione ---------- */
.course{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--m-line);background:var(--ink);}
.course-main{padding:clamp(28px,4vw,56px);background:var(--white);}
.course-sub{margin-top:12px;font-size:var(--fs-lead);color:var(--ink-soft);}
.course-facts{margin:32px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:fact;}
.course-facts li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500;counter-increment:fact;}
.course-facts li::before{content:counter(fact,decimal-leading-zero);min-width:2em;padding-top:.15em;font-size:.82rem;font-weight:600;color:var(--ink-soft);}
.course-speaker{margin-top:24px;color:var(--ink-soft);}
.course-side{display:flex;flex-direction:column;gap:24px;padding:clamp(24px,3vw,40px);background:var(--paper-2);}
.course-poster img{width:100%;height:auto;}
.course-doc{display:flex;align-items:center;gap:16px;padding-top:20px;border-top:1px solid rgba(27,43,69,.2);}
.course-doc img{width:56px;flex:none;border:1px solid var(--line);}
.course-doc p{font-size:.9rem;color:var(--ink-soft);}
.course-doc strong{display:block;font-size:.98rem;color:var(--ink);}
.course-side .btn-row{display:grid;gap:10px;}
.course-side .btn{width:100%;}
@media (max-width:900px){.course{grid-template-columns:1fr;}}

/* ---------- Contatti ---------- */
.contact-table{display:grid;gap:var(--m-line);background:var(--ink);grid-template-columns:minmax(0,1fr) minmax(0,1fr) 10%;grid-template-areas:"phone mail y" "hours company w" "place place b";}
.ct-cell{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,40px);background:var(--white);color:var(--ink);text-decoration:none;}
.ct-phone{grid-area:phone;}
.ct-mail{grid-area:mail;}
.ct-hours{grid-area:hours;}
.ct-company{grid-area:company;}
.ct-place{grid-area:place;}
.ct-yellow{grid-area:y;background:var(--yellow);}
.ct-white{grid-area:w;}
.ct-blue{grid-area:b;background:var(--blue);}
.ct-value{font-family:var(--display);font-weight:600;font-size:clamp(1.55rem,1.15rem + 1.5vw,2.5rem);line-height:1.1;overflow-wrap:anywhere;transition:color var(--duration-quick) var(--ease-smooth-out);}
@media (hover:hover) and (pointer:fine){a.ct-cell:hover .ct-value{color:var(--action);}}
a.ct-cell:active .ct-value{color:var(--action);}
.ct-text{font-size:1.1rem;font-weight:500;}
.ct-address{font-size:var(--fs-h3);}
.ct-place .btn-row{margin-top:14px;}
.contact-cta{margin-top:40px;}
@media (max-width:720px){
  .contact-table{grid-template-columns:minmax(0,1fr) 12%;grid-template-areas:"phone y" "mail y" "hours w" "company w" "place b";}
}

/* ---------- Richiesta di preventivo ---------- */
.form-layout{row-gap:48px;align-items:start;}
.form-layout > form{grid-column:1 / span 8;}
.form-aside{grid-column:10 / -1;}
.form-aside h2{font-size:1.55rem;}
.steps{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink);counter-reset:step;}
.steps li{position:relative;padding:14px 0 14px 2.4rem;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-soft);counter-increment:step;}
.steps li::before{content:counter(step);position:absolute;left:0;top:12px;font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.1;color:var(--ink);}
.aside-call{margin-top:44px;}
.aside-call p{margin:8px 0 16px;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px;}
@media (max-width:900px){.form-layout > form,.form-aside{grid-column:1 / -1;}}

/* ---------- Area riservata ---------- */
.login-sec{padding-block:clamp(48px,7vw,104px);}
.login-layout{align-items:center;}
.login-card{grid-column:1 / span 6;max-width:520px;}
.login-card h1{font-size:clamp(2.4rem,1.6rem + 2.6vw,3.8rem);}
.login-card .lead{margin-top:16px;}
.login-card form{display:grid;gap:18px;margin-top:32px;}
.login-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.login-card .btn{width:100%;}
.login-card .form-note{margin-top:20px;}
.login-visual{grid-column:8 / -1;justify-self:end;width:100%;max-width:420px;}
@media (max-width:900px){.login-card{grid-column:1 / -1;}.login-visual{display:none;}}

/* ---------- Pagine semplici (grazie, 404) ---------- */
.simple-page{padding-block:clamp(56px,8vw,120px);}
.simple-page .wrap{align-items:center;}
.simple-text{grid-column:1 / span 7;}
.simple-text > p:not(.eyebrow){margin-top:24px;max-width:56ch;font-size:1.08rem;color:var(--ink-soft);}
.simple-page .btn-row{margin-top:36px;}
.simple-text > .simple-back{margin-top:28px;font-size:1rem;}
.simple-visual{grid-column:9 / -1;justify-self:end;width:100%;max-width:360px;}
@media (max-width:900px){
  .simple-text,.simple-visual{grid-column:1 / -1;}
  .simple-visual{justify-self:start;max-width:280px;margin-top:48px;}
}

/* ---------- Testi legali ---------- */
.prose > *{max-width:70ch;}
.prose h2{margin-top:48px;margin-bottom:12px;font-size:clamp(1.4rem,1.2rem + .7vw,1.8rem);}
.prose h2:first-child{margin-top:0;}
.prose p{margin-top:12px;}