/* Layout for the Mailan marketing pages (landing / features / pricing / examples).
   Component look comes from deccster + theme.css; this arranges the page sections to
   match the Aura design comps. Follows deccster's convention: own layout building blocks
   are components ([is=…]); variants of existing components are modifiers ([has~=…]). */

[is=landingpage] {
    max-width: none;
}

/* Feature icon tile: light-indigo square with an indigo glyph (per the design comps). */
[is=feat-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius);
    background: #e5eeff;
    color: var(--call-to-action-color);
    margin-bottom: var(--space-xs);
}

[is=feat-icon] [is=icon] {
    font-size: 24px;
}

/* --- Sticky site header: logo | centered nav | actions --- */
[has~=site-header] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) var(--space-m);
    background: rgba(248, 249, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--grey-light-color);
}

[has~=site-nav] {
    display: flex;
    gap: var(--space-l);
    justify-content: center;
}

[has~=site-nav] a {
    color: var(--foreground-soft-color);
    text-decoration: none;
    font-weight: 500;
}

[has~=site-nav] a:hover {
    color: var(--call-to-action-color);
}

[has~=site-header] [is=button-row] {
    justify-self: end;
}

/* Logged-in avatar in the header: clickable circle → dashboard. No dropdown, no logout. */
[is=avatar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--call-to-action-color);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

[is=avatar]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

[is=avatar][hidden] {
    display: none;
}

/* Generic section rhythm */
[is=hero],
[is=trusted],
[is=split],
[has~=reliability] {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: var(--space-l);
}

/* --- Legal pages (Impressum, Datenschutz) — readable single-column prose --- */
[has~=legal] {
    max-width: 760px;
    margin-inline: auto;
    padding-inline: var(--space-l);
    padding-block: var(--space-xl);
}

[has~=legal] h1 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    margin: var(--space-s) 0 var(--space-l);
}

[has~=legal] [is=card] {
    margin-bottom: var(--space-m);
}

[has~=legal] [is=card] h2 {
    font-size: 20px;
    margin: 0 0 var(--space-s);
}

[has~=legal] [is=card] p {
    color: var(--foreground-soft-color);
    line-height: 1.6;
    margin: 0 0 var(--space-s);
}

[has~=legal] [is=card] p:last-child {
    margin-bottom: 0;
}

/* --- Hero (centered) --- */
[is=hero] {
    text-align: center;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xl);
}

[is=hero] h1 {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.1;
    margin: 0 0 var(--space-m);
}

[is=hero] p {
    max-width: 620px;
    margin: 0 auto var(--space-l);
    color: var(--foreground-soft-color);
    font-size: 18px;
}

[has~=hero-actions] {
    justify-content: center;
}

/* --- Split: contact form + code --- */
[is=split] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    padding-block: var(--space-xl);
    align-items: stretch;
}

[has~=contact-card] {
    display: flex;
    flex-direction: column;
}

[has~=contact-card] form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-top: var(--space-m);
}

[has~=block] {
    width: 100%;
}

[is=code-card] {
    background: #0f172a;
    border-radius: var(--border-radius-m);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[is=code-head] {
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[is=code-head] [is=small-text] {
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

[is=code-card] .CodeMirror {
    background: #0f172a;
    min-height: 320px;
}

/* --- Feature / reliability grid --- */
[has~=reliability] {
    padding-block: var(--space-xl);
}

[has~=reliability] [is=section-header] {
    text-align: center;
    margin-bottom: var(--space-l);
}

[has~=reliability] [is=grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

[has~=reliability] [is=card] {
    padding: var(--space-l);
}

/* --- Pricing --- */
[has~=pricing] {
    max-width: 1080px;
    margin-inline: auto;
    padding: var(--space-xl) var(--space-l) var(--space-xxl);
}

[has~=pricing] [is=grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
    align-items: start;
}

[has~=pricing] [is=card] {
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

[has~=pricing] [is=card][has~=featured-plan] {
    border: 2px solid var(--call-to-action-color);
    box-shadow: 0 12px 32px -8px rgba(79, 70, 229, 0.25);
    position: relative;
}

[is=popular] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--call-to-action-color);
    color: #fff;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 2;
}

[is=price-row] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 var(--space-s);
}

[is=price-row] [is=price] {
    font-family: var(--secondary-font);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}

[is=price-row] [is=price][has~=custom] {
    font-size: 32px;
}

[has~=checks] {
    list-style: none;
    margin: 0 0 var(--space-m);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
}

[has~=checks] li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

[has~=checks] [is=icon] {
    color: var(--call-to-action-color);
    font-size: 1.1rem;
}

/* --- Features: bento grid --- */
[is=bento] {
    max-width: 1080px;
    margin-inline: auto;
    padding: var(--space-l) var(--space-l) var(--space-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

[is=bento] [is=card] {
    padding: var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

[is=bento] [has~=span-2] {
    grid-column: span 2;
}

[is=bento] [has~=span-3] {
    grid-column: span 3;
}

[is=bento] [is=badge] {
    margin-bottom: var(--space-xs);
}

[is=mini-code] {
    margin-top: var(--space-s);
    background: #0f172a;
    border-radius: var(--border-radius);
    overflow: hidden;
}

[is=mini-code] .CodeMirror {
    background: #0f172a;
    min-height: 180px;
}

/* --- Features: security & compliance --- */
[is=security] {
    max-width: 1080px;
    margin-inline: auto;
    padding: var(--space-l);
}

[has~=security-card] {
    background: linear-gradient(135deg, #eef0ff, #e5eeff);
    border: 1px solid var(--call-to-action-lighter-color);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-xl);
}

[is=security-copy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

[is=security-tiles] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
}

[is=security-tiles] [is=feat-icon] {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    background: #ffffff;
}

[is=security-tiles] [is=feat-icon] [is=icon] {
    font-size: 32px;
}

/* --- Generic centered CTA --- */
[is=cta] {
    text-align: center;
    max-width: 720px;
    margin: var(--space-xl) auto;
    padding: var(--space-xl) var(--space-l);
}

[is=cta] h2 {
    margin-bottom: var(--space-s);
}

[is=cta] p {
    margin-bottom: var(--space-m);
}

/* --- Examples: sidebar gallery + content --- */
[is=examples-shell] {
    max-width: 1180px;
    margin-inline: auto;
    padding: var(--space-l) var(--space-l) var(--space-xl);
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-xl);
    align-items: start;
}

[has~=examples-nav] {
    position: sticky;
    top: 84px;
    background: transparent;
    min-width: 0;
    padding-top: 0;
}

[has~=examples-nav] [is=kicker] {
    display: block;
    padding: 0 var(--space-xs) var(--space-s);
}

[is=examples-content]>h1 {
    margin: 0 0 var(--space-s);
}

[is=examples-content]>p {
    max-width: 620px;
    margin-bottom: var(--space-l);
}

[is=example] {
    margin-top: var(--space-xl);
}

[is=example]>h2 {
    margin-bottom: var(--space-m);
}

[is=example-split] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
    align-items: stretch;
}

[has~=preview-card] {
    display: flex;
    flex-direction: column;
    padding: var(--space-l);
}

[has~=preview-card] form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin-top: var(--space-s);
}

[is=newsletter] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-m) 0;
}

[has~=inline-form] {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-s);
    width: 100%;
}

[has~=inline-form] [is=input] {
    flex: 1;
}

@media (max-width: 820px) {
    [is=examples-shell] {
        grid-template-columns: 1fr;
    }

    [has~=examples-nav] {
        position: static;
    }

    [is=example-split] {
        grid-template-columns: 1fr;
    }
}

/* Auth landing pages (verify-email, reset-password) carry the shared footer but no page
   content of their own — everything happens in the modal dialog above. Push the frame to
   full viewport height so the footer sits at the bottom edge instead of mid-screen. */
[has~=auth-page] {
    justify-content: flex-end;
    min-height: 100vh;
}

/* --- Footer --- */
[has~=site-footer] {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    width: 100%;
    margin: 0;
    padding: var(--space-l);
    border-top: 1px solid var(--grey-light-color);

}

[is=footer-link-columns] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);

    width: 100%;
    justify-content: center;
    justify-items: center;
}

[is=footer-link-columns] > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

[is=footer-link-columns] a {
    color: var(--foreground-soft-color);
    text-decoration: none;
}

[is=footer-link-columns] a:hover {
    color: var(--call-to-action-color);
}

@media (max-width: 820px) {
    [has~=site-header] {
        grid-template-columns: 1fr auto;
    }

    [has~=site-nav] {
        display: none;
    }

    [is=split],
    [has~=reliability] [is=grid],
    [is=footer-link-columns] {
        grid-template-columns: 1fr;
    }
}