/* On-screen and print layout for wedding invitation cards (non–full-page print). */

.invitation-card-visual {
    position: relative;
    width: 100%;
    border-radius: 0.35rem;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.invitation-card-visual--5x7 {
    aspect-ratio: 5 / 7;
}

.invitation-card-visual--4x6 {
    aspect-ratio: 4 / 6;
}

.invitation-card-visual--a6 {
    aspect-ratio: 105 / 148;
}

.invitation-card-visual__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.invitation-card-visual__full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.invitation-card-visual__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fce7f3, #fef9c3);
    color: rgba(0, 0, 0, 0.35);
    font-size: clamp(2rem, 8vw, 4rem);
}

.invitation-card-visual__photo {
    position: absolute;
    /* default position/size; overridden by inline style from InvitationCardInsetStyle when present */
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    /* No low max-width: lets full-resolution uploads use more pixels as the card scales */
    max-width: none;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    z-index: 2;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.35);
}

/* Live preview on register/edit: drag to reposition the bubble */
.invitation-card-visual--inset-interactive .invitation-card-visual__photo {
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
}

.invitation-card-visual--inset-interactive.invitation-card-visual--inset-dragging .invitation-card-visual__photo {
    cursor: grabbing;
}

.invitation-card-visual__photo img {
    width: 100%;
    height: 100%;
    /* Entire photo inside the circle (letterboxing only where aspect ratio differs) — avoids heavy cropping */
    object-fit: contain;
    /* Centre the fitted bitmap; pan uses translate so vertical works for portrait photos too (object-position Y often has no effect when height fills the box). */
    object-position: center center;
    display: block;
    transform: translate(
            calc(var(--inset-photo-pan-x, 0) * 1%),
            calc(var(--inset-photo-pan-y, 0) * 1%)
        )
        scale(var(--inset-photo-zoom, 1));
    transform-origin: center center;
}

.invitation-card-visual__text {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 38% 10% 14%;
    box-sizing: border-box;
    pointer-events: none;
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.65);
}

.invitation-card-visual--has-photo .invitation-card-visual__text {
    padding-top: 46%;
}

.invitation-card-visual__names {
    font-weight: 700;
    font-size: clamp(0.95rem, 2.8vw, 1.35rem);
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.invitation-card-visual__title {
    font-weight: 600;
    font-size: clamp(0.72rem, 2vw, 1rem);
    margin-bottom: 0.45rem;
    font-style: italic;
}

.invitation-card-visual__meta {
    font-size: clamp(0.65rem, 1.75vw, 0.88rem);
    line-height: 1.4;
    opacity: 0.95;
}

.invitation-card-visual--compact {
    max-height: 260px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Public event/announcement grids: same proportions as preview/detail (no short compact strip). */
.invitation-card-visual--listing {
    max-height: none;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.invitation-card-visual--thumb {
    width: 60px;
    height: 48px;
    max-height: none;
    flex-shrink: 0;
    border-radius: 0.25rem;
    box-shadow: none;
}

.invitation-card-visual--thumb.invitation-card-visual--5x7,
.invitation-card-visual--thumb.invitation-card-visual--4x6,
.invitation-card-visual--thumb.invitation-card-visual--a6 {
    aspect-ratio: auto;
}

.invitation-card-visual--thumb .invitation-card-visual__text,
.invitation-card-visual--thumb .invitation-card-visual__photo {
    display: none;
}

.invitation-card-visual--detail {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Print route: width comes from .invitation-print-wrap (--inv-print-w); card fills that box. */
.invitation-card-visual--print {
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 7;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    break-inside: avoid;
    page-break-inside: avoid;
    margin-left: auto;
    margin-right: auto;
    container-type: inline-size;
    container-name: invitation-card-print;
}

.invitation-card-visual--print.invitation-card-visual--4x6 {
    aspect-ratio: 4 / 6;
}

.invitation-card-visual--print.invitation-card-visual--a6 {
    aspect-ratio: 105 / 148;
}

.invitation-print-body {
    margin: 0;
    background: #e8eaed;
}

.invitation-print-wrap {
    --inv-print-w: 5in;
    --inv-print-h: 7in;
    box-sizing: border-box;
    width: min(var(--inv-print-w), calc(100vw - 2rem));
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.5rem 1rem 2rem;
}

/* Typography on the print preview follows the card box (cqi), not the monitor (vw). */
@media screen {
    .invitation-card-visual--print .invitation-card-visual__names {
        font-size: clamp(0.45rem, 5.8cqi, 0.95rem);
    }

    .invitation-card-visual--print .invitation-card-visual__title {
        font-size: clamp(0.35rem, 4.5cqi, 0.72rem);
    }

    .invitation-card-visual--print .invitation-card-visual__meta {
        font-size: clamp(0.32rem, 4cqi, 0.65rem);
    }

    .invitation-card-visual--print .invitation-card-visual__placeholder {
        font-size: clamp(1rem, 18cqi, 2.25rem);
    }
}

/* Picker sits inside a flex column card; keep the scrollport strictly viewport-bound. */
.card .form-group:has(.invitation-template-picker-scroll) {
    min-width: 0;
    max-width: 100%;
}

form#invitationEventForm,
form#announcementEventForm {
    min-width: 0;
    max-width: 100%;
}

/* Template picker: wrap into rows; scroll vertically inside this box only (no page-wide horizontal scroll).
   Height must clear one full tile (5:7 thumb grows with width) plus caption row; clamp avoids tiny vh on phones. */
.invitation-template-picker-scroll {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: clamp(12.75rem, 34vh, 20rem);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
    padding: 2px 4px 8px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.55);
}

/* Grid/flex parents default min-width:auto = content width; max-content track was stretching the page. */
form#invitationEventForm .row,
form#announcementEventForm .row {
    min-width: 0;
}

form#invitationEventForm .row > [class*="col-"],
form#announcementEventForm .row > [class*="col-"] {
    min-width: 0;
}

.invitation-template-picker-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 2px;
}

.invitation-template-picker-item {
    min-width: 0;
}

.invitation-template-picker-item .invitation-template-tile-inner {
    min-height: 100%;
}

/* Template picker (create / edit invitation) */
.invitation-template-thumb {
    aspect-ratio: 5 / 7;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    min-height: 72px;
}

/* Larger previews when exactly four tiles share one row inside the picker */
.invitation-template-picker-item .invitation-template-thumb {
    min-height: 96px;
}

.invitation-template-picker-item .invitation-template-thumb--photoonly::after {
    font-size: 1.45rem;
}

.invitation-template-thumb--photoonly {
    background: linear-gradient(145deg, #e9d5ff, #fce7f3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.invitation-template-thumb--photoonly::after {
    content: "📷";
    font-size: 1.25rem;
    opacity: 0.6;
}

.invitation-template-tile {
    cursor: pointer;
}

.invitation-template-tile-inner {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: #fff;
}

.invitation-template-tile:has(input:checked) .invitation-template-tile-inner {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

@media print {
    .invitation-print-hint,
    .d-print-none {
        display: none !important;
    }

    .invitation-print-body {
        background: #fff;
    }

    /*
     * Card box + typography for print: prefer literal @Model.PagePrint* rules in PrintInvitation /
     * PrintMarriageAnnouncement @@section Styles (loads after this file) so Edge print preview
     * applies 5×7 / 4×6 / A6 correctly. Fallback if those pages omit the block:
     */
    .invitation-print-wrap {
        padding: 0 !important;
        display: block !important;
        width: var(--inv-print-w) !important;
        max-width: none !important;
        height: var(--inv-print-h) !important;
        min-height: var(--inv-print-h) !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .invitation-card-visual--print,
    .invitation-card-visual--print.invitation-card-visual--4x6,
    .invitation-card-visual--print.invitation-card-visual--a6 {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        aspect-ratio: unset !important;
        box-shadow: none !important;
        margin: 0 !important;
        container-type: normal !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html.invitation-print-root,
    body.invitation-print-body {
        margin: 0;
        height: auto;
        min-height: 0;
    }

    .invitation-card-visual--print .invitation-card-visual__names {
        font-size: 11pt !important;
        line-height: 1.25 !important;
    }

    .invitation-card-visual--print .invitation-card-visual__title {
        font-size: 9.5pt !important;
    }

    .invitation-card-visual--print .invitation-card-visual__meta {
        font-size: 8.5pt !important;
        line-height: 1.4 !important;
    }

    .invitation-card-visual--print .invitation-card-visual__placeholder {
        font-size: 26pt !important;
    }

    .invitation-card-visual--print .invitation-card-visual__photo img {
        max-width: none !important;
    }
}

/* Icon-only share row (custom PNG/SVG assets, announcements & events detail) */
.share-icons-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.share-icon-link,
button.share-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
}

.share-icon-link:hover,
button.share-icon-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.share-icon-link:focus-visible,
button.share-icon-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 3px;
}

.share-icon-link img,
button.share-icon-btn img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}