/* Home page (app/view/home.phtml) - all the rules are scoped to .ap-home
-------------------------------------------------- */

.ap-home {
    --ap-accent: #712cf9;
    --ap-accent-soft: rgba(113, 44, 249, .10);
    --ap-hero-from: #1b1340;
    --ap-hero-to: #3b1d8f;
    color: var(--bs-body-color);        /* carousel.css sets a lighter body text color */
}
.ap-home section { scroll-margin-top: 70px; }

/* Hero: starts right below the fixed navbar (body padding-top is 3rem, the navbar is 56px high) */
.ap-home .hero { margin-top: .5rem; background: linear-gradient(135deg, var(--ap-hero-from), var(--ap-hero-to)); color: #fff; }
.ap-home .hero .lead { color: rgba(255, 255, 255, .85); }
.ap-home .hero .badge-version { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.ap-home .composer-box { background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); border-radius: .5rem; font-family: SFMono-Regular, Consolas, monospace; }
.ap-home .composer-box code { color: #c9f7c9; font-size: 1rem; }
.ap-home .hero-stack { position: relative; min-height: 340px; }
.ap-home .hero-stack img { position: absolute; width: 58%; border-radius: .5rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .45); background: #fff; }
.ap-home .hero-stack img:nth-child(1) { left: 0; top: 30px; transform: rotate(-4deg); }
.ap-home .hero-stack img:nth-child(2) { left: 22%; top: 0; z-index: 2; }
.ap-home .hero-stack img:nth-child(3) { right: 0; top: 40px; transform: rotate(4deg); }

/* Sections */
.ap-home .section-kicker { color: var(--ap-accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.ap-home .step-num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ap-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.ap-home .feature-icon { width: 3rem; height: 3rem; border-radius: .75rem; background: var(--ap-accent-soft); color: var(--ap-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.ap-home .card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.ap-home .card-hover:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12); }

/* Hello World result preview (A5 landscape page drawn with CSS) */
.ap-home .pdf-page { aspect-ratio: 210 / 148; background: #fff; border-radius: .25rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); position: relative; overflow: hidden; }
.ap-home .pdf-page .pdf-box { position: absolute; left: 4.8%; right: 4.8%; top: 40.5%; height: 16.9%; background: #2874a6; color: #fff; font: 700 clamp(1rem, 3.2vw, 2rem) Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: center; }
.ap-home .pdf-page .pdf-date { position: absolute; left: 4.8%; right: 4.8%; top: 57.4%; height: 3.4%; background: #85c1e9; color: #1b4f72; font: .55rem Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: center; }

/* Create templates with AI */
.ap-home .ai-section { background: var(--ap-accent-soft); }
.ap-home .prompt-card { border-left: 4px solid var(--ap-accent); }
.ap-home .prompt-card pre { white-space: pre-wrap; font-size: .85rem; margin: 0; background: transparent; color: inherit; }
.ap-home .example-thumb { height: 200px; object-fit: contain; background: var(--bs-tertiary-bg); }

/* Used in production: Interventio documents drawn as paper sheets */
.ap-home .doc-chain { display: flex; align-items: center; gap: .75rem; }
.ap-home .doc-chain .bi-arrow-right { color: var(--ap-accent); font-size: 1.4rem; flex-shrink: 0; }
.ap-home .doc-sheet { flex: 1; aspect-ratio: 210 / 297; background: #fff; color: #333; border-radius: .25rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); padding: 9% 8%; font: 600 .6rem Helvetica, Arial, sans-serif; display: flex; flex-direction: column; gap: 5%; }
.ap-home .doc-sheet .doc-head { display: flex; justify-content: space-between; align-items: center; }
.ap-home .doc-sheet .doc-logo { width: 32%; height: .9rem; border-radius: .15rem; }
.ap-home .doc-sheet .doc-title { font-size: .62rem; letter-spacing: .04em; }
.ap-home .doc-sheet .doc-line { height: .3rem; background: #e3e6ea; border-radius: .15rem; }
.ap-home .doc-sheet .doc-line.short { width: 55%; }
.ap-home .doc-sheet .doc-table { display: flex; flex-direction: column; gap: .22rem; margin-top: 4%; }
.ap-home .doc-sheet .doc-table .doc-line:first-child { height: .4rem; }
.ap-home .doc-sheet .doc-total { margin-top: auto; align-self: flex-end; width: 45%; height: .9rem; border-radius: .15rem; }
.ap-home .doc-sheet .doc-sign { margin-top: auto; align-self: flex-end; width: 45%; border-top: 1px solid #999; padding-top: .15rem; font: italic .5rem Helvetica, Arial, sans-serif; text-align: center; color: #666; }
.ap-home .doc-caption { font-size: .8rem; text-align: center; margin-top: .5rem; }
.ap-home .sector-card img { height: 150px; object-fit: cover; }
.ap-home .sector-card .bi-arrow-right { color: #f53003; }