/* Landing page "Miopia la copii" (CMS miopia-la-copii, content in site/content/pages/miopia-la-copii.html).
   Linked with ?v=N from templates/cms/page.tpl: bump N on change. */
.dl-myo { max-width: 72rem; margin: 0 auto; color: var(--dl-ink); }
.dl-myo p { line-height: 1.65; }
.dl-myo h2, .dl-myo h3 { color: var(--dl-ink); }
.dl-myo .btn { text-decoration: none; }

/* ---------- shared bits ---------- */
.dl-myo-eyebrow, .dl-myo-kicker {
  margin: 0 0 .6rem; color: var(--dl-slate-dark); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.dl-myo-title {
  margin: 0 0 1rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; text-wrap: balance;
}
.dl-myo-center { text-align: center; }
.dl-myo-title.dl-myo-center::after {
  content: ""; display: block; width: 3rem; height: 3px; margin: .85rem auto 0; border-radius: 2px; background: var(--dl-amber);
}
.dl-myo-sec { margin: 0; padding: 2.75rem 0; }
@media (min-width: 768px) { .dl-myo-sec { padding: 4rem 0; } }
.dl-myo-sec + .dl-myo-sec:not(.dl-myo-band) { border-top: 1px solid var(--dl-line); }
.dl-myo-band {
  background: rgba(117, 117, 142, .055);
  box-shadow: 0 0 0 100vmax rgba(117, 117, 142, .055);
  clip-path: inset(0 -100vmax);
}
.dl-myo-sec.dl-myo-band + .dl-myo-sec:not(.dl-myo-band) { border-top: 0; }
.dl-myo-subhead { margin: 1.25rem 0 .5rem; font-weight: 700; }
.dl-myo-ticks { margin: 0 0 1rem; padding: 0; list-style: none; }
.dl-myo-ticks li { position: relative; margin: 0 0 .5rem; padding-left: 1.6rem; line-height: 1.55; }
.dl-myo-ticks li::before {
  content: ""; position: absolute; left: .2rem; top: .45em; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--dl-amber); box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--dl-amber);
}
.dl-myo .material-icons {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 14px; background: rgba(255, 181, 81, .25); color: var(--dl-ink); font-size: 1.45rem;
}

/* two columns: text and a figure */
.dl-myo-split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) {
  .dl-myo-split { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
  .dl-myo-split--lens { grid-template-columns: .8fr 1.2fr; }
}
.dl-myo-figure { margin: 0; }
.dl-myo-figure figcaption { margin-top: .75rem; color: var(--dl-slate-dark); font-size: .88rem; text-align: center; }
.dl-myo-figure svg { display: block; width: 100%; height: auto; }

/* ---------- illustration strokes (hero, eyes) ---------- */
.dl-art__halo { fill: rgba(255, 181, 81, .18); }
.dl-art__wall { fill: #fff; stroke: var(--dl-slate); stroke-width: 3; }
.dl-art__cornea { fill: none; stroke: var(--dl-slate); stroke-width: 3; stroke-linecap: round; }
.dl-art__lens { fill: rgba(117, 117, 142, .18); stroke: var(--dl-slate); stroke-width: 2; }
.dl-art__retina { fill: none; stroke: var(--dl-amber); stroke-width: 6; stroke-linecap: round; }
.dl-art__ray { fill: none; stroke: var(--dl-ink); stroke-width: 1.6; opacity: .7; }
.dl-art__beam { stroke: var(--dl-amber-hover); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.dl-art__dot { fill: var(--dl-amber-hover); }
.dl-art__blur { stroke: var(--dl-amber-hover); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.dl-art__device { fill: var(--dl-slate-dark); }
.dl-art__dim { fill: none; stroke: var(--dl-slate-dark); stroke-width: 2; }
.dl-art__tag { fill: var(--dl-ink); }
.dl-art__tagtext { fill: #fff; font-size: 14px; font-weight: 600; font-family: inherit; }

/* ---------- hero ---------- */
.dl-hero.dl-myo-hero {
  display: grid; gap: 1.5rem; align-items: center; margin: .5rem 0 0; padding: 2rem 1.25rem; text-align: left;
  background: linear-gradient(135deg, var(--dl-tint) 50%, rgba(255, 181, 81, .3));
}
@media (min-width: 768px) { .dl-hero.dl-myo-hero { padding: 3rem 2.75rem; } }
@media (min-width: 992px) { .dl-hero.dl-myo-hero { grid-template-columns: 1.25fr .75fr; gap: 2.5rem; } }
.dl-myo-hero__title {
  margin: 0 0 1rem; font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.9rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance;
}
.dl-myo-hero__lead { margin: 0 0 1.5rem; max-width: 38rem; font-size: 1.12rem; color: var(--dl-slate-dark); }
.dl-myo-hero .dl-hero__actions { justify-content: flex-start; }
.dl-myo-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.dl-myo-chips li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--dl-line); font-size: .88rem; font-weight: 600;
}
.dl-myo .dl-myo-chips .material-icons { width: 1.8rem; height: 1.8rem; border-radius: 50%; font-size: 1.05rem; }
.dl-myo-hero__art { margin: 0; max-width: 22rem; justify-self: center; width: 100%; }
@media (max-width: 991.98px) { .dl-myo-hero__art { max-width: 17rem; order: -1; } }
@media (max-width: 575px) {
  .dl-myo-hero__art { max-width: 12rem; }
  .dl-myo-hero__art .dl-art__tag, .dl-myo-hero__art .dl-art__tagtext { display: none; }
  .dl-myo-hero .dl-hero__actions .btn { width: 100%; }
}

/* ---------- eyes: normal and myopic ---------- */
.dl-myo-eyes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dl-myo-eye { padding: 1rem .75rem .9rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 18px; }
.dl-myo-eye__cap { margin: .5rem 0 0; font-size: .9rem; color: var(--dl-slate-dark); text-align: center; line-height: 1.45; }
.dl-myo-eye__cap strong { display: block; color: var(--dl-ink); font-size: 1rem; }

/* ---------- cards ---------- */
.dl-myo-cards { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .dl-myo-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 768px) { .dl-myo-cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dl-myo-cards--four { grid-template-columns: repeat(4, 1fr); } }
.dl-myo-card { padding: 1.5rem 1.35rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 18px; }
.dl-myo-card h3 { margin: 1rem 0 .4rem; font-size: 1.08rem; font-weight: 700; }
.dl-myo-card p { margin: 0; color: var(--dl-slate-dark); font-size: .96rem; }
/* phones: icon and title on one row, so the stacked cards stay short */
@media (max-width: 767.98px) {
  .dl-myo-card, .dl-myo-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; padding: 1.1rem 1.1rem 1.2rem; }
  .dl-myo-card h3, .dl-myo-steps h3 { margin: 0; }
  .dl-myo-card p, .dl-myo-steps p { grid-column: 1 / -1; margin-top: .6rem; }
  .dl-myo-steps li::after { display: none; }
}
.dl-myo-note {
  display: flex; align-items: center; gap: .9rem; max-width: 46rem; margin: 2rem auto 0; padding: 1rem 1.25rem;
  background: var(--dl-tint); border-left: 5px solid var(--dl-amber); border-radius: 14px; font-weight: 600;
}
.dl-myo .dl-myo-note .material-icons { background: #fff; }

/* ---------- biometry steps ---------- */
.dl-myo-steps { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: dl-step; }
@media (min-width: 768px) { .dl-myo-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .dl-myo-steps { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.dl-myo-steps li {
  position: relative; padding: 1.5rem 1.35rem; background: #fff; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(35, 35, 46, .05), 0 8px 24px rgba(35, 35, 46, .05); counter-increment: dl-step;
}
.dl-myo-steps li::after {
  content: counter(dl-step); position: absolute; top: 1.2rem; right: 1.35rem; color: rgba(117, 117, 142, .35);
  font-size: 2rem; font-weight: 800; line-height: 1;
}
.dl-myo-steps h3 { margin: 1rem 0 .4rem; font-size: 1.05rem; font-weight: 700; }
.dl-myo-steps p { margin: 0; color: var(--dl-slate-dark); font-size: .95rem; }
.dl-myo-service .medical-services-wrapper { display: flex; justify-content: center; margin: 2rem 0 0; }
.dl-myo-service .medical-service-wrapper { flex: 0 1 22rem; box-shadow: 0 8px 24px rgba(35, 35, 46, .06); }

/* ---------- benefits and chart ---------- */
.dl-myo-benefits { display: grid; gap: 1rem; margin-top: 1.5rem; }
.dl-myo-benefit { display: flex; gap: 1rem; align-items: flex-start; }
.dl-myo-benefit h3 { margin: .2rem 0 .25rem; font-size: 1.05rem; font-weight: 700; }
.dl-myo-benefit p { margin: 0; color: var(--dl-slate-dark); font-size: .96rem; }
.dl-myo-chart { padding: 1.25rem 1rem 1rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 18px; }
.dl-chart__grid { stroke: var(--dl-line); stroke-width: 1; }
.dl-chart__axis { fill: none; stroke: var(--dl-slate); stroke-width: 2; }
.dl-chart__line { fill: none; stroke-width: 4; stroke-linecap: round; }
.dl-chart__line--normal { stroke: var(--dl-slate); stroke-dasharray: 2 8; }
.dl-chart__line--fast { stroke: #D9822B; }
.dl-chart__line--treated { stroke: var(--dl-slate-dark); }
.dl-chart__start { stroke: var(--dl-slate); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dl-chart__dot { fill: #fff; stroke: var(--dl-slate-dark); stroke-width: 3; }
.dl-chart__label { fill: var(--dl-slate-dark); font-size: 15px; font-weight: 600; font-family: inherit; }
.dl-chart__legend, .dl-lens__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: .88rem; }
.dl-chart__key::before, .dl-lens__key::before {
  content: ""; display: inline-block; width: 1.4rem; height: 4px; margin-right: .45rem; border-radius: 2px; vertical-align: middle;
}
.dl-chart__key--fast::before { background: #D9822B; }
.dl-chart__key--treated::before { background: var(--dl-slate-dark); }
.dl-chart__key--normal::before { background: repeating-linear-gradient(90deg, var(--dl-slate) 0 3px, transparent 3px 8px); }

/* ---------- lens ---------- */
.dl-myo-lens svg { max-width: 20rem; margin: 0 auto; }
.dl-lens__glass { fill: rgba(117, 117, 142, .07); stroke: var(--dl-slate); stroke-width: 3; }
.dl-lens__ring { fill: none; stroke: var(--dl-amber-hover); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .85; }
.dl-lens__center { fill: #fff; stroke: var(--dl-slate-dark); stroke-width: 2; }
.dl-lens__mark { stroke: var(--dl-slate-dark); stroke-width: 2; stroke-linecap: round; }
.dl-lens__key--center::before { width: .9rem; height: .9rem; border-radius: 50%; background: #fff; border: 2px solid var(--dl-slate-dark); }
.dl-lens__key--ring::before { width: .9rem; height: .9rem; border-radius: 50%; background: none; border: 2px dotted var(--dl-amber-hover); }

/* ---------- clinic + optics ---------- */
.dl-myo-duo { display: grid; gap: 1rem; align-items: center; margin-top: 2rem; }
@media (min-width: 768px) { .dl-myo-duo { grid-template-columns: 1fr auto 1fr; gap: 1.25rem; } }
.dl-myo-duo__item { height: 100%; padding: 1.75rem 1.5rem; background: var(--dl-tint); border-radius: 18px; }
.dl-myo-duo__item h3 { margin: 1rem 0 .75rem; font-size: 1.15rem; font-weight: 700; }
.dl-myo-duo__item .dl-myo-ticks { margin: 0; }
.dl-myo-duo__item .dl-myo-ticks li::before { box-shadow: inset 0 0 0 3px var(--dl-tint), 0 0 0 1px var(--dl-amber); }
.dl-myo-duo__link { display: flex; justify-content: center; }
.dl-myo .dl-myo-duo__link .material-icons { border-radius: 50%; background: var(--dl-amber); }
@media (max-width: 767.98px) { .dl-myo-duo__link .material-icons { transform: rotate(90deg); } }
.dl-myo-place { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1.5rem 0 0; font-weight: 600; }
.dl-myo .dl-myo-place .material-icons { width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; }

/* ---------- doctor ---------- */
.dl-myo-doctor { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) { .dl-myo-doctor { grid-template-columns: 15rem 1fr; gap: 2.5rem; } }
.dl-myo-doctor__photo {
  width: 100%; max-width: 15rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; justify-self: center;
  border-radius: 18px; background: var(--dl-tint); box-shadow: 0 8px 24px rgba(35, 35, 46, .08);
}
.dl-myo-doctor p { color: var(--dl-slate-dark); }

/* ---------- FAQ ---------- */
.dl-faq details { max-width: 46rem; margin: 0 auto .75rem; background: #fff; border: 1px solid var(--dl-line); border-radius: 14px; }
.dl-faq .dl-myo-title { margin-bottom: 2rem; }
.dl-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary::after { content: "+"; flex: none; color: var(--dl-slate-dark); font-size: 1.4rem; font-weight: 400; line-height: 1; transition: transform .2s; }
.dl-faq details[open] summary::after { transform: rotate(45deg); }
.dl-faq details[open] { border-color: var(--dl-amber); }
.dl-faq details p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--dl-slate-dark); }

/* ---------- closing call to action ---------- */
.dl-myo-cta.dl-medical { margin: 1rem 0 1rem; }
.dl-myo-cta h2 { font-size: 1.45rem; }
@media (max-width: 575px) { .dl-myo-cta .btn { width: 100%; } }
.dl-myo-disclaimer { margin: 0 0 2rem; color: var(--dl-slate-dark); font-size: .82rem; text-align: center; }

@media (prefers-reduced-motion: reduce) { .dl-faq summary::after { transition: none; } }