/* Om mig (om-mig.hbs). Bygger på site.css och komponentbiblioteket. */

/* Heron: fotot stort och runt, med ramen som ritas som ett blyertsstreck (ABOUT-FRAME) */
.adv-about__portrait { position: relative; justify-self: center; width: min(100%, 320px); aspect-ratio: 1; margin: 0; display: grid; place-items: center; }
.adv-about__portrait > * { grid-area: 1 / 1; }
.adv-about__portrait img { width: 88%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.adv-about__pencil { width: 100%; height: 100%; overflow: visible; }
.adv-about__pencil circle { fill: none; stroke: var(--c-lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.adv-about__pencil .p1 { stroke-width: 1.4; }
.adv-about__pencil .p2 { stroke-width: 0.7; opacity: 0.6; }
.js .adv-about__portrait:not(.is-in) .adv-about__pencil circle { stroke-dashoffset: 100; }
.adv-about__portrait.is-in .adv-about__pencil circle { transition: stroke-dashoffset 1100ms var(--ease-out); }
.adv-about__portrait.is-in .adv-about__pencil .p2 { transition-delay: 150ms; }

/* Bakgrund: byggskylten bredvid en linje med tre punkter (ABOUT-TIMELINE) */
.adv-about__bg { display: grid; gap: var(--s-8); align-items: start; }
@container k (min-width: 900px) { .adv-about__bg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); } }
.adv-about__line { position: relative; display: grid; gap: var(--s-6); margin: var(--s-6) 0 0; padding: 0 0 0 var(--s-8); list-style: none; }
.adv-about__line::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--c-accent); transform-origin: top; }
.adv-about__line li { position: relative; display: grid; gap: var(--s-2); }
.adv-about__line li::before { content: ""; position: absolute; left: calc(-1 * var(--s-8) + 1px); top: 4px; width: 14px; height: 14px; border: 2px solid var(--c-accent); border-radius: 50%; background: var(--bg); }
.adv-about__line li:last-child::before { background: var(--c-accent); }
.adv-about__line .k-p { max-width: 60ch; }
.js .adv-about__line:not(.is-in)::before { transform: scaleY(0); }
.js .adv-about__line:not(.is-in) li { opacity: 0; transform: translateY(6px); }
.adv-about__line.is-in::before { transition: transform 900ms var(--ease-out); }
.adv-about__line.is-in li { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.adv-about__line.is-in li:nth-child(2) { transition-delay: 300ms; }
.adv-about__line.is-in li:nth-child(3) { transition-delay: 600ms; }

/* Så hanterar jag din data: fyra rutor */
.adv-about__data { display: grid; gap: var(--s-4); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
@container k (min-width: 700px) { .adv-about__data { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container k (min-width: 1100px) { .adv-about__data { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adv-about__data li { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--c-white); }
.adv-about__data .od-icon { --od-icon-size: 26px; color: var(--c-accent); margin-bottom: var(--s-2); }

/* Kontakt: text och formulär */
.adv-about__contact { display: grid; gap: var(--s-8); align-items: start; }
@container k (min-width: 900px) { .adv-about__contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-12); } }
.adv-about__form .contact-embed { min-height: 420px; }
.adv-about__form iframe { display: block; width: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .adv-about__pencil circle, .adv-about__line::before, .adv-about__line li { transition: none !important; }
}