/* Demo 2: prima pagină. Primul ecran după planșa 02 din docs/demo/machete/demo-2.pen; restul pe aceleași mărimi.
   Secțiunile alternează: deschis (.sect), închis (.sect.inchis). */

/* Antetul și paginile țin conținutul în 1440, cu margini de 48 */
.antet { padding-inline: max(var(--s3), (100% - 1440px) / 2 + var(--s3)); }

/* Primul ecran: textul în stânga, un cadru din filmul lecției 1 în dreapta */
.erou { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 72px; align-items: center; max-width: 1440px; margin: 0 auto; padding: var(--s3) var(--s3) 72px; }
.erou h1 { font-size: clamp(52px, 5vw, var(--afis)); line-height: 1.12; margin: var(--s2) 0; }
.erou h1 .marcat { white-space: nowrap; }
.erou p.slab { max-width: 660px; font-size: 22px; text-wrap: pretty; }
.erou .butoane { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s2) 40px; margin-top: var(--s3); }
.erou .butoane .legatura { font-size: var(--tx); margin: 0; }
.dispozitive { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); font: 500 var(--mic) var(--text); color: var(--soft); }
.dispozitive span { display: flex; gap: 8px; font-size: 24px; color: var(--ink); }

.erou-img { position: relative; padding-bottom: var(--s3); }
.erou-film { display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; }
.erou-film img { grid-area: 1/1; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.erou-film b { grid-area: 1/1; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--rec); border: 2px solid var(--ink); font-size: 48px; transition: transform .15s; }
.erou-film:hover b { transform: scale(1.06); }
.erou-img .cartonas { position: absolute; right: -20px; bottom: 0; display: grid; gap: 4px; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: var(--s1) var(--s2); text-decoration: none; }
.erou-img .cartonas h3 { font-size: 30px; }

@media (max-width: 1000px) {
  .erou { grid-template-columns: 1fr; gap: var(--s3); padding-bottom: var(--s3); }
  .erou-img { max-width: 680px; margin-top: var(--s2); }
  .erou-img .cartonas { right: var(--s1); }
}
@media (max-width: 600px) {
  .erou h1 { font-size: var(--afis); }
  .erou h1 .marcat { white-space: normal; }
  .erou .butoane { flex-direction: column; align-items: flex-start; }
  .erou-film b { width: 80px; height: 80px; font-size: 38px; }
  .erou-img .cartonas { left: var(--s1); right: var(--s1); }
  .erou-img .cartonas h3 { font-size: 24px; }
}

/* Secțiunile */
.sect { padding-block: 96px; }
.sect .in { max-width: 1440px; margin: 0 auto; padding-inline: var(--s3); }
.sect h2 { margin: var(--s1) 0 var(--s2); max-width: 1100px; text-wrap: balance; }
.sect p.lat { max-width: 860px; margin-top: var(--s2); }
.inchis { background: var(--ink); color: var(--on); }
.inchis .slab, .inchis .eti:not(.mk) { color: var(--onS); }
.inchis .marcat { color: var(--ink); }
.nota { margin-top: var(--s3); }

/* Problema părinților */
.problema { font-size: var(--t1); line-height: 1.16; }

/* Cum funcționează: filmul de prezentare (video/prezentare). Încape întreg pe ecran, cu bara de jos, și pe un laptop de 13". */
.prezentare { display: block; width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16/9; margin: var(--s3) auto 0; border: 2px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 0 8px 0 var(--ink); }
.sub-film { display: flex; justify-content: center; margin-top: var(--s3); }

/* Ce învață copilul și cursurile: câte trei carduri */
.trei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); }
.trei > .card:not(.curs) { padding: 32px; color: var(--ink); }
.trei > .card:not(.curs) .slab { color: var(--soft); }
.trei .cerc { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--mk); border: 2px solid var(--ink); font-size: 36px; margin-bottom: var(--s2); }
.trei h3 { font-size: var(--t2); margin-bottom: var(--s1); }
.cursuri-sus { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; padding-bottom: var(--s1); border-bottom: 2px solid var(--ink); }
.cursuri-sus h2 { margin: 0; }
.inchis .nota { color: var(--mk); }
.curs { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; position: relative; color: var(--ink); }
.curs > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: 2px solid var(--ink); }
.curs.stins > img { filter: saturate(.55) opacity(.8); }
.curs .tag { position: absolute; top: 18px; left: 18px; right: 18px; width: fit-content; background: var(--ink); color: var(--on); border-radius: 10px; padding: 6px 14px; font: 700 16px/1.25 var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.curs .tag.albastru { background: var(--co); }
.curs div { padding: var(--s2) 28px 30px; }
.curs h3 { font-size: var(--t2); }
.curs .slab { color: var(--soft); }
a.curs { transition: transform .12s, box-shadow .12s; }
a.curs:hover { box-shadow: 0 8px 0 var(--mk); transform: translateY(-4px); }

/* Atent, nu dependent */
.sanatos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.bife { display: grid; gap: var(--s2); margin-top: var(--s3); }
.bife > div { display: grid; grid-template-columns: 48px 1fr; gap: var(--s2); }
.bife .b { width: 48px; height: 48px; background: var(--ok); color: var(--on); border-radius: 50%; display: grid; place-items: center; font-size: 28px; }
.bife h3 { font-size: var(--t2); margin-bottom: 4px; }
.poza-alba { background: #fff; border: 2px solid var(--ink); border-radius: 24px; padding: var(--s2); }
.poza-alba img { width: 100%; aspect-ratio: 1/1.05; object-fit: cover; }

/* Echipa și întrebările */
.echipa { line-height: 1.14; }
.sect .intrebari { margin-top: 96px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; padding-top: var(--s3); border-top: 2px solid var(--ink); }
.faq h3 { font-size: calc(var(--t2) - 4px); margin-bottom: var(--s1); }

.subsol { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s2) 40px; padding: var(--s3) max(var(--s3), (100% - 1440px) / 2 + var(--s3)); background: var(--ink); color: var(--onS); }
.subsol .logo { color: var(--on); } .subsol .logo span { color: var(--ink); }

@media (max-width: 1000px) {
  .sect { padding-block: 64px; }
  .sanatos { grid-template-columns: 1fr; gap: var(--s3); }
  .trei { grid-template-columns: 1fr; }
  .curs > img { aspect-ratio: 16/8; }
  .sanatos .poza-alba { max-width: 440px; }
  .sect .intrebari { margin-top: 64px; }
}
@media (max-width: 600px) {
  .sect { padding-block: 48px; }
  .sect .in { padding-inline: 16px; }
  .faq { grid-template-columns: 1fr; }
  .curs .tag { font-size: 15px; }
  .subsol { padding-inline: 16px; }
}