/*
 * AKopi shared responsive foundation.
 * Loaded after each page-specific stylesheet so layout safety stays consistent
 * across the public site, invitations, account portals, tables, and modals.
 */

:root {
    --akopi-gutter: clamp(16px, 3vw, 64px);
    --akopi-section-space: clamp(56px, 8vw, 110px);
    --akopi-card-padding: clamp(20px, 3vw, 34px);
    --akopi-shell-max: 2200px;
    --akopi-content-max: 1800px;
    --akopi-header-height: 80px;
    --akopi-section-margin: clamp(14px, 1.5vw, 28px);
}

html {
    max-inline-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-inline-size: 0 !important;
    max-inline-size: 100%;
}

body :where(main, section, article, header, footer, nav, form, fieldset, div) {
    min-inline-size: 0;
}

:where(img, picture, video, canvas) {
    max-inline-size: 100%;
}

:where(input, select, textarea, button) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where(p, li, dd, address, figcaption, blockquote, td, th) {
    overflow-wrap: anywhere;
}

:where(dialog) {
    max-inline-size: calc(100% - (2 * var(--akopi-gutter)));
}

/* Public marketing and legal pages */
.header-inner,
.hero-inner,
.confidence-bar,
.section-shell,
.footer-shell {
    inline-size: min(var(--akopi-shell-max), calc(100% - (2 * var(--akopi-gutter))));
    max-inline-size: none;
    margin-inline: auto;
}

.legal-hero-inner,
.legal-layout {
    max-inline-size: calc(100% - (2 * var(--akopi-gutter)));
}

.section-shell {
    margin-block: var(--akopi-section-margin);
    padding-inline: clamp(20px, 4.5vw, 72px);
}

:is(
    .services,
    .guest-experience,
    .samples,
    .client-workspace,
    .wedding-invitation-showcase,
    .occasions,
    .process
) {
    min-block-size: calc(100svh - var(--akopi-header-height) - (2 * var(--akopi-section-margin)));
    min-block-size: calc(100dvh - var(--akopi-header-height) - (2 * var(--akopi-section-margin)));
    align-content: center;
    scroll-margin-block-start: calc(var(--akopi-header-height) + var(--akopi-section-margin));
}

:is(.services, .samples, .occasions, .process) {
    display: grid;
}

.hero-inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    align-items: center;
    padding-block: clamp(42px, 6vh, 72px) clamp(34px, 5vh, 56px);
}

.hero {
    min-block-size: calc(100svh - var(--akopi-header-height));
    min-block-size: calc(100dvh - var(--akopi-header-height));
    padding-block-end: var(--cookie-banner-space, 0px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: clip;
}

.hero-inner {
    align-self: center;
}

.confidence-bar {
    align-self: end;
}

.hero-copy,
.hero h1 {
    max-inline-size: 900px;
}

.hero-brand-mark img {
    inline-size: clamp(300px, 25vw, 440px);
}

.hero-inner,
.guest-experience,
.client-workspace,
.request-section,
.samples-heading,
.faq-layout {
    column-gap: clamp(28px, 5vw, 72px);
}

.client-workspace-media {
    min-block-size: clamp(360px, 34vw, 470px);
}

.form-surface,
.form-surface form,
.field,
.captcha-field {
    min-inline-size: 0;
}

.form-surface :where(input, select, textarea) {
    inline-size: 100%;
}

/* Wedding and christening invitations */
:is(.wedding-invitation, .christening-invitation)
    :is(.story-section, .section.prenup-section, .event-details-section, .ceremony-timeline-section, .entourage-section, .gift-section, .rsvp-section) {
    padding-block: var(--akopi-section-space);
    padding-inline: var(--akopi-gutter);
}

:is(.wedding-invitation, .christening-invitation)
    :is(.story-wrap, .prenup-wrap, .event-details-wrap, .ceremony-timeline-wrap, .entourage-wrap, .gift-wrap, .rsvp-wrap) {
    inline-size: 100%;
    max-inline-size: var(--section-max, 1160px);
    margin-inline: auto;
}

:is(.wedding-invitation, .christening-invitation)
    :is(.story-card, .event-details-card, .gift-card, .rsvp-card) {
    max-inline-size: 100%;
}

:is(.wedding-invitation, .christening-invitation)
    :is(.hero-title, .story-title, .event-title, .ceremony-timeline-header h2, .entourage-header h2, .gift-header h2, .rsvp-title) {
    overflow-wrap: anywhere;
    text-wrap: balance;
}

:is(.wedding-invitation, .christening-invitation) .hero,
.birthday-page-mode-invitation .birthday-hero,
.birthday-page-mode-tribute .birthday-hero {
    min-block-size: 100vh;
    min-block-size: 100svh;
    min-block-size: 100dvh;
}

/* Birthday invitation, tribute, message, and memory pages */
:is(.birthday-page-mode-invitation, .birthday-page-mode-tribute) .birthday-section,
.message-form-page .memory-form-shell {
    inline-size: min(1140px, calc(100% - (2 * var(--akopi-gutter))));
}

:is(.birthday-page-mode-invitation, .birthday-page-mode-tribute) .birthday-section {
    padding-block: var(--akopi-section-space);
}

:is(.birthday-page-mode-invitation, .birthday-page-mode-tribute)
    :is(.details-section, .wishes-section, .gift-section) {
    inline-size: 100%;
    padding-inline: max(var(--akopi-gutter), calc((100% - 1140px) / 2));
}

.birthday-message-dialog,
.tribute-lightbox,
.video-surprise-dialog {
    max-block-size: calc(100dvh - (2 * var(--akopi-gutter)));
}

.birthday-message-dialog {
    max-inline-size: min(420px, calc(100% - (2 * var(--akopi-gutter))));
}

/* Client dashboards, superadmin, RSVP lists, and login portals */
:is(.dashboard-shell, .dashboard-container, .admin-shell, .rsvp-shell) {
    inline-size: min(var(--akopi-content-max), calc(100% - (2 * var(--akopi-gutter))));
    max-inline-size: var(--akopi-content-max);
    padding-block: clamp(22px, 3vw, 36px) clamp(56px, 6vw, 80px);
}

:is(.dashboard-topbar, .topbar, .rsvp-topbar),
:is(.top-actions, .rsvp-actions, .section-actions, .form-actions, .calendar-contract-actions) {
    flex-wrap: wrap;
}

:is(.dashboard-shell, .dashboard-container, .admin-shell, .rsvp-shell)
    :is(.brand-block, .brand, .rsvp-brand) h1,
:is(.dashboard-shell, .dashboard-container, .admin-shell, .rsvp-shell)
    :is(.event-copy, .hero-title, .section-header) h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    overflow-wrap: anywhere;
}

:is(.client-hero, .hero-panel, .section-card, .rsvp-toolbar, .table-wrapper) {
    padding: var(--akopi-card-padding);
}

:is(.client-hero-content, .info-grid, .editable-meta, .form-grid, .approval-contract-grid) > *,
:is(.stats-grid, .rsvp-stats-grid, .preset-grid, .prenup-upload-grid, .gift-admin-grid) > * {
    min-inline-size: 0;
}

:is(.table-scroll, .table-wrapper) {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper {
    overflow-x: auto;
}

:is(.modal, .calendar-event-modal) {
    padding: var(--akopi-gutter);
}

:is(.modal-box, .calendar-event-modal-box) {
    max-inline-size: 100%;
    max-block-size: calc(100dvh - (2 * var(--akopi-gutter)));
    overscroll-behavior: contain;
}

:is(.modal-head, .modal-body, .confirmation-content) {
    padding-inline: var(--akopi-card-padding);
}

.calendar-contract-preview iframe {
    block-size: clamp(360px, 62dvh, 680px);
    min-block-size: min(360px, 62dvh);
}

.login-page {
    min-block-size: 100vh;
    min-block-size: 100svh;
    min-block-size: 100dvh;
    padding: max(20px, env(safe-area-inset-top)) var(--akopi-gutter) max(20px, env(safe-area-inset-bottom));
}

.login-wrapper {
    inline-size: min(430px, 100%);
}

.login-card {
    padding: clamp(30px, 7vw, 46px) clamp(20px, 6vw, 34px) clamp(24px, 5vw, 34px);
}

@media (max-width: 1100px) {
    .header-inner,
    .hero-inner,
    .confidence-bar,
    .section-shell,
    .footer-shell {
        inline-size: calc(100% - (2 * var(--akopi-gutter)));
    }

    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }
}

@media (max-width: 860px) {
    :root {
        --akopi-header-height: 76px;
    }

    .hero-inner,
    .guest-experience,
    .client-workspace,
    .request-section,
    .samples-heading,
    .faq-layout,
    :is(.wedding-invitation, .christening-invitation) .story-card,
    :is(.birthday-page-mode-invitation, .birthday-page-mode-tribute) :is(.story-section, .rsvp-section) {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-workspace-media {
        inline-size: min(820px, 100%);
    }

    .hero-inner {
        padding-block: clamp(28px, 6vw, 44px) clamp(26px, 5vw, 36px);
    }

    .hero-brand-mark img {
        inline-size: min(300px, 64vw);
    }

    .hero-copy,
    .hero h1 {
        max-inline-size: 100%;
    }

    :is(.dashboard-topbar, .topbar, .rsvp-topbar, .section-header) {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    :root {
        --akopi-gutter: clamp(12px, 4vw, 20px);
        --akopi-card-padding: clamp(18px, 5vw, 26px);
    }

    :is(.top-actions, .rsvp-actions, .section-actions, .form-actions, .calendar-contract-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    :is(.top-actions, .rsvp-actions, .section-actions, .form-actions, .calendar-contract-actions)
        :is(.btn, .back-btn, button, a) {
        inline-size: 100%;
    }

    :is(.modal-head, .modal-body, .confirmation-content) {
        padding-inline: var(--akopi-card-padding);
    }

    .birthday-message-dialog {
        inset-inline: var(--akopi-gutter);
        inline-size: auto;
        max-inline-size: none;
    }
}

@media (max-width: 620px) {
    :root {
        --akopi-header-height: 70px;
    }

    .section-shell {
        padding-inline: var(--akopi-card-padding);
    }

    .client-workspace-media {
        min-block-size: 0;
    }

    :is(.wedding-invitation, .christening-invitation)
        :is(.story-section, .section.prenup-section, .event-details-section, .ceremony-timeline-section, .entourage-section, .gift-section, .rsvp-section) {
        padding-inline: var(--akopi-gutter);
    }

    :is(.wedding-invitation, .christening-invitation)
        :is(.story-card, .event-details-card, .gift-card, .rsvp-card) {
        padding-inline: var(--akopi-card-padding);
    }

    .birthday-message-dialog {
        inset-block-end: max(80px, calc(env(safe-area-inset-bottom) + 66px));
        block-size: min(70dvh, 560px);
    }
}

@media (min-width: 861px) and (max-height: 1050px) {
    :root {
        --akopi-header-height: 72px;
    }

    .header-inner {
        min-block-size: 72px;
    }

    .hero-inner {
        padding-block: clamp(30px, 4.5vh, 48px);
    }

    .hero h1 {
        font-size: clamp(48px, 4.4vw, 72px);
    }

    .hero-lede {
        margin-block: 18px 24px;
        line-height: 1.5;
    }

    .hero-brand-mark img {
        inline-size: clamp(280px, 23vw, 390px);
    }

    :is(
        .services,
        .guest-experience,
        .samples,
        .client-workspace,
        .wedding-invitation-showcase,
        .occasions,
        .process
    ) {
        padding-block: clamp(36px, 6vh, 56px);
    }

    .client-workspace-media {
        min-block-size: clamp(320px, 50vh, 400px);
    }

    .confidence-bar {
        margin-block-end: 18px;
        padding-block: 14px;
    }
}

@media (min-width: 1600px) {
    :root {
        --akopi-wide-body: clamp(16px, min(.94vw, 1.8vh), 20px);
        --akopi-wide-body-emphasis: clamp(17px, min(1vw, 1.9vh), 21px);
        --akopi-wide-label: clamp(12px, min(.72vw, 1.35vh), 15px);
        --akopi-wide-icon: clamp(28px, min(1.8vw, 3.5vh), 36px);
    }

    .services .centered-heading h2 {
        font-size: clamp(62px, min(4vw, 7vh), 82px);
    }

    :is(.guest-experience-copy, .samples-heading) h2 {
        font-size: clamp(58px, min(3.75vw, 6.4vh), 78px);
    }

    .client-workspace-copy h2 {
        font-size: clamp(70px, min(4.4vw, 7.4vh), 88px);
    }

    .occasions .centered-heading h2 {
        font-size: clamp(54px, min(3.4vw, 6vh), 72px);
    }

    .process .centered-heading h2 {
        font-size: clamp(68px, min(4.2vw, 7vh), 86px);
    }

    :is(
        .service-card p,
        .guest-experience-copy > p,
        .guest-experience-copy li,
        .occasions .centered-heading p,
        .process li span
    ) {
        font-size: var(--akopi-wide-body);
    }

    :is(.samples-heading p, .client-workspace-copy p) {
        font-size: var(--akopi-wide-body-emphasis);
    }

    .service-card {
        min-block-size: clamp(290px, min(20vw, 36vh), 360px);
        padding: clamp(36px, min(2.2vw, 4.2vh), 46px);
    }

    .service-mark {
        inline-size: clamp(64px, min(4vw, 8vh), 82px);
        block-size: clamp(64px, min(4vw, 8vh), 82px);
    }

    .service-mark svg,
    .occasion-list button > span svg {
        inline-size: var(--akopi-wide-icon);
        block-size: var(--akopi-wide-icon);
    }

    .service-card h3 {
        font-size: clamp(25px, min(1.45vw, 2.8vh), 31px);
    }

    .guest-experience-copy li {
        grid-template-columns: clamp(26px, 1.7vw, 34px) minmax(0, 1fr);
        gap: clamp(12px, .8vw, 18px);
    }

    .guest-experience-copy li svg {
        inline-size: clamp(23px, min(1.5vw, 3vh), 30px);
        block-size: clamp(23px, min(1.5vw, 3vh), 30px);
    }

    .guest-experience-copy li strong,
    .samples-heading-action > a {
        font-size: var(--akopi-wide-label);
    }

    .sample-preview img {
        block-size: clamp(280px, min(16vw, 31vh), 380px);
    }

    .occasion-list {
        max-inline-size: clamp(1120px, 66vw, 1480px);
    }

    .occasion-list button {
        min-block-size: clamp(108px, min(7vw, 14vh), 142px);
    }

    .occasion-list button > span {
        inline-size: clamp(58px, min(3.6vw, 7vh), 74px);
        block-size: clamp(58px, min(3.6vw, 7vh), 74px);
    }

    .occasion-list button > strong {
        font-size: clamp(17px, min(1.05vw, 2.1vh), 21px);
    }

    .process li {
        min-block-size: clamp(150px, min(10vw, 20vh), 200px);
        padding-inline: clamp(42px, 3vw, 64px);
    }

    .process strong {
        font-size: clamp(27px, min(1.55vw, 3vh), 34px);
    }
}

@media (max-width: 380px) {
    .captcha-shell {
        inline-size: 274px;
        overflow: hidden;
    }

    .captcha-shell .g-recaptcha {
        transform: scale(.9);
        transform-origin: top left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}