/* ================================================================
   STUDIO G — Packages / Pricing Page
   PSD: 1920 × 1080 px

   The 2×2 card grid sits in the same position and uses the
   same gap values as the photo grid, so the page feels native
   to the rest of the site.

   Cell size at 1920×1080:
     width  = (76.198% of 1920 − 30px gap) / 2 ≈ 716px
     height = (67.222% of 1080 − 36px gap) / 2 ≈ 345px
   ================================================================ */

/* ── Grid container ─────────────────────────────────
   Identical bounds to the photo grid.
   PSD: X=228 Y=177 W=1463 H=726                     */
.pkg-grid {
    position: fixed;
    left:   11.875%;    /* 228/1920 */
    top:    16.389%;    /* 177/1080 */
    width:  76.198%;    /* 1463/1920 */
    height: 67.222%;    /* 726/1080  */

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:    repeat(2, 1fr);
    column-gap: 30px;   /* matches photo grid */
    row-gap:    36px;   /* matches photo grid */

    z-index: 0;
    animation: fadeIn 0.8s ease 0.15s both;
}

/* ── Single card ─────────────────────────────────── */
.pkg-card {
    display: flex;
    flex-direction: column;
    /* Top border as visual "header rule" — same motif as decorative lines */
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: clamp(14px, 1.9vh, 22px) clamp(16px, 2vw, 36px) clamp(10px, 1.5vh, 18px) 0;
    overflow: hidden;
    animation: slideUp 0.65s ease both;
}

/* Stagger card entrance */
.pkg-card:nth-child(1) { animation-delay: 0.12s; }
.pkg-card:nth-child(2) { animation-delay: 0.24s; }
.pkg-card:nth-child(3) { animation-delay: 0.36s; }
.pkg-card:nth-child(4) { animation-delay: 0.48s; }

/* Special Requests — slightly dimmer border to signal "custom" */
.pkg-special { border-top-color: rgba(255, 255, 255, 0.2); }

/* ── Card header ──────────────────────────────────── */
.pkg-header {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    margin-bottom: clamp(10px, 1.5vh, 18px);
    flex-shrink: 0;
}

/* Price — the visual anchor of the card */
.pkg-price {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(36px, 3.8vw, 72px);
    letter-spacing: -0.01em;
    line-height: 1;
    color: #ffffff;
    display: block;
}

/* "€" currency superscript — smaller, top-aligned */
.pkg-currency {
    font-size: 0.42em;
    font-weight: 300;
    vertical-align: top;
    padding-top: 0.3em;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* "from " prefix on Special Requests */
.pkg-from {
    font-size: 0.3em;
    font-weight: 200;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.38);
    vertical-align: baseline;
    text-transform: uppercase;
}

/* Package name tag — small, spaced uppercase */
.pkg-name {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(7px, 0.573vw, 11px);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    display: block;
}

/* ── Item list ────────────────────────────────────── */
.pkg-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.65vh, 8px);
    flex: 1;      /* expands to consume available vertical space */
    overflow: hidden;
}

.pkg-items li {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(11px, 0.781vw, 15px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    padding-left: 1.1em;
    position: relative;
}

/* Em-dash bullet — echoes the decorative line motif */
.pkg-items li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.25);
}

/* ── Card footer (delivery) ──────────────────────── */
.pkg-footer {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    flex-shrink: 0;
    padding-top: clamp(8px, 1vh, 12px);
    margin-top: clamp(8px, 1vh, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pkg-delivery {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(8px, 0.573vw, 11px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.pkg-extra {
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(8px, 0.521vw, 10px);
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

/* ── Footnote ─────────────────────────────────────────────────────────
   Left-aligned below the grid.  top is the shared Y axis;
   translateY(-1.5em) nudges it so the text BASELINE matches the
   button baseline (button font is ~2× larger, so its cap sits higher). */
.pkg-footnote {
    position: fixed;
    left:  11.875%;
    top:   calc(16.389% + 67.222% + 2.2vh);
    transform: translateY(-1.5em);          /* baseline-align with button */
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(8px, 0.521vw, 10px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    margin: 0;
    z-index: 2;
    animation: fadeIn 0.8s ease 0.6s both;
}

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Schedule a meeting button ─────────────────────────────────────────
   Right-column-aligned below the grid (same shared Y axis).            */
.pkg-schedule-btn {
    position: fixed;
    left: 50.755%;
    top:  calc(16.389% + 67.222% + 2.2vh);
    transform: translateY(-50%);            /* centre on Y axis */
    background:  transparent;
    border:      none;
    padding:     0;
    outline:     none;
    cursor:      pointer;
    font-family: 'Myriad Pro', 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
    font-size:   clamp(10px, 1.042vw, 20px);
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    gap: 0.6em;
    z-index: 2;
    animation: fadeIn 0.8s ease 0.5s both;
    transition: color 0.22s ease-out, transform 0.22s ease-out;
}
.pkg-schedule-arrow {
    width:  clamp(12px, 1.1vw, 20px);
    height: clamp(6px, 0.55vw, 10px);  /* explicit height prevents runaway sizing */
    flex-shrink: 0;
    transition: transform 0.22s ease-out;
}
.pkg-schedule-btn:hover                     { color: #ffffff; transform: translateY(-50%) scale(1.05); }
.pkg-schedule-btn:hover .pkg-schedule-arrow { transform: translateX(4px); }
.pkg-schedule-btn:active                    { transform: translateY(-50%) scale(0.98); }

@media (max-width: 1024px) {
    .pkg-footnote {
        position: relative;
        left: auto; top: auto;
        transform: none;
        padding: 0 0 1rem;
        display: block;
        animation: none; opacity: 1;
    }
    .pkg-schedule-btn {
        position: relative;
        left: auto; top: auto;
        transform: none;
        padding: 1rem 0 2rem;
        animation: none; opacity: 1;
    }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    html, body {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    /* Inset all content into the safe zone (matches the menu frame) */
    body { padding: 8vh 10vw 8vh; }

    .pkg-grid {
        position: static !important;
        left: auto !important; top: auto !important;
        width: auto !important; height: auto !important;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        column-gap: 5%;
        row-gap: 4vh;
        padding: 0;
    }
    .pkg-card {
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }
    .pkg-footnote {
        padding: 0 0 0.75rem;
    }
    .pkg-schedule-btn {
        padding: 0 0 0.5rem;
    }

    /* Opaque frame bars: content tucks behind the menu at top/bottom */
    body::before, body::after {
        content: "";
        position: fixed;
        left: 0; right: 0;
        background: var(--bg);
        z-index: 5;
        pointer-events: none;
    }
    body::before { top: 0;    height: 7vh; }
    body::after  { bottom: 0; height: 7.5vh; }
}

@media (max-width: 640px) {
    .pkg-grid { grid-template-columns: 1fr; }
    .pkg-price { font-size: clamp(40px, 11vw, 60px); }
}