/* excire.com — generic block page (product/content pages).
 * Shares the measured tokens and the global section rhythm, so every page
 * built from blocks looks consistent.
 */

/* Hero with photo background */
.phero { position: relative; background: #000; color: #fff; background-size: cover; background-position: center; min-height: 703px; display: flex; align-items: center; }
.phero--plain { background: #1a1a1a; }
.phero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; padding-block: 100px 110px; width: 100%; }
.phero__inner:has(.phero__media) { grid-template-columns: 1.15fr 1fr; }
.phero__title { font-size: var(--fs-h1); font-weight: 700; color: #fff; margin: 0 0 var(--space-4); max-width: 22ch; }
.phero__subtitle { font-size: var(--fs-h3); font-weight: 400; line-height: 2.5rem; color: #fff; margin: 0 0 var(--space-5); max-width: 34ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 8px; }
/* Tutorial hero variant: heading over the photo, white, left-aligned, medium weight */
/* Tutorial hero keeps its own padding-based height, not the 703px product height */
.phero--tutorial { min-height: 0; }
.phero--tutorial .phero__title { font-weight: 600; max-width: none; }
.phero--tutorial .phero__inner { padding-block: 190px; }   /* taller hero area */
.phero__media img { width: 100%; height: auto; }

/* Section heading-only block */
.blockheading { text-align: center; }
.blockheading .section__title { max-width: 26ch; margin-inline: auto; }

/* Content rows */
.frow__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-7); align-items: center; }
.frow__grid--single { grid-template-columns: 1fr; max-width: 900px; }
.frow__grid--reverse .frow__body { order: 2; }
.frow__subtitle { font-size: 26px; font-weight: var(--fw-medium); color: var(--color-primary); margin: 0 0 var(--space-3); }
.frow__media img { width: 100%; height: auto; }
.frow__cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--space-4); }
/* Font-size intentionally omitted — buttons use the global .btn size (20px). */
.frow__cta .btn { width: 310px; max-width: 100%; text-align: center; text-transform: uppercase;
    font-family: var(--font-button); font-weight: 400; color: #fff;
    background: linear-gradient(135deg, #1B67E6 0%, #00ACFF 100%); }
.frow__cta .btn--ghost { background: #00ACFF; box-shadow: none; }
.frow__cta .btn:hover, .frow__cta .btn--ghost:hover { background: #1B67E6; color: #fff; }

/* Customer references slider */
.refs__slider { max-width: 900px; margin: var(--space-5) auto 0; }
.ref { display: none; margin: 0; background: #fff; padding: var(--space-6); text-align: center; }
.ref.is-active { display: block; }
.ref figcaption { margin-top: var(--space-3); }
.refs__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4); }
.refs__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(0,0,0,.25); cursor: pointer; padding: 0; }
.refs__dot.is-active { background: #000; }

/* FAQ accordion styles are canonical in base.css (shared by every page). */

/* Prose defaults inside blocks */
.prose ul { margin: var(--space-3) 0; padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose img { margin: var(--space-3) 0; }

@media (max-width: 900px) {
    .phero { min-height: 0; }
    .phero__inner, .phero__inner:has(.phero__media) { grid-template-columns: 1fr; padding-block: var(--space-6) var(--space-7); }
    .phero--tutorial .phero__inner { padding-block: 90px; }   /* shorter hero on phones */
    .phero__title { font-size: clamp(30px, 8vw, 42px); }
    .phero__title, .phero__subtitle { max-width: 100%; }
    .frow__grid, .frow__grid--reverse { grid-template-columns: 1fr; }
    .frow__grid--reverse .frow__body { order: 0; }
    .frow__cta .btn { width: 100%; }
}

/* Lead heading above a card grid (rendered as h3) */
.cards__lead { font-size: var(--fs-h3); font-weight: 600; color: #000; text-align: center;
    max-width: 46ch; margin: var(--space-7) auto var(--space-4); line-height: 1.3; }
.cards__lead + .cards__grid { margin-top: 0; }

/* Tutorial card grid (thumbnail, rule, play icon + blue link) */
.cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
/* Consecutive card blocks: keep the same gap between boxes as within a grid */
.cards:has(+ .cards) > .container { padding-bottom: calc(var(--space-4) / 2); }
.cards + .cards > .container { padding-top: calc(var(--space-4) / 2); }
.cards + .cards .cards__grid { margin-top: 0; }
.card { background: #f7f7f7; padding: var(--space-3); display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.card__img { width: 100%; height: auto; margin-bottom: var(--space-3); }
.card__link { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.card__link a { display: flex; align-items: flex-start; gap: 10px; color: var(--color-link); font-size: 18px; }
.card__link a:hover { color: var(--color-primary); }
.card__play { flex: 0 0 auto; margin-top: 3px; }
@media (max-width: 1024px) { .cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cards__grid { grid-template-columns: 1fr; } }

/* Video lightbox (tutorial cards open the YouTube embed on the same page) */
.video-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; }
.video-modal[hidden] { display: none; }
.video-modal__frame { position: relative; width: min(980px, 100%); aspect-ratio: 16 / 9; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__close { position: absolute; top: 12px; right: 22px; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 0; }

/* API contact form */
.apiform .container { max-width: 820px; }
.apiform__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--space-5); }
/* Each field is label + control; the wrapper is the grid item. */
.apiform__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apiform__field--full { grid-column: 1 / -1; }
.apiform__label { font-size: 15px; font-weight: var(--fw-medium); color: var(--color-text); }
.apiform__input { width: 100%; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 2px; font: inherit; font-size: 16px; background: #fff; }
.apiform__input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.apiform__input--full { grid-column: 1 / -1; }
.apiform__submit { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 600px) { .apiform__form { grid-template-columns: minmax(0, 1fr); } }

/* Legacy tutorial "Weiterführende Links" navigation (src/data/tutnav.php) */
.tutnav { padding-block: var(--space-7); }
.tutnav__title { font-size: var(--fs-h2); font-weight: 700; text-align: center; margin: 0 0 var(--space-6); }
.tutnav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); max-width: 1080px; margin-inline: auto; }
.tutnav__heading { font-size: 20px; font-weight: 700; margin: 0 0 var(--space-3); }
.tutnav__list { list-style: none; margin: 0; padding: 0; }
.tutnav__list li { margin-bottom: var(--space-2); line-height: 1.4; }
.tutnav__list a { color: var(--color-primary); text-decoration: none; }
.tutnav__list a:hover { text-decoration: underline; }
@media (max-width: 600px) { .tutnav__cols { grid-template-columns: 1fr; } }