/* ═══════════════════════════════════════════════════════════════════════
   Template 01 · Feed
   ───────────────────────────────────────────────────────────────────────
   The social-app layout the product shipped with. This is the default for
   every pre-existing event, so it reproduces the previous guest page
   exactly — chrome and content cards stay light with dark text on ANY page
   color, but take a faint tint of it so the whole page reads as themed
   rather than generic white, and never clashes on dark pages.

   Uses all four owner colors.
   ═══════════════════════════════════════════════════════════════════════ */

/* Owner colors arrive on :root from guest::partials.head. Never redeclare
   --ev-* here — a declaration on .gt-feed (the body) would beat the value
   inherited from :root and silently ignore the owner's choice. Defaults
   belong in the var() fallback at each usage site instead. */
.gt-feed {
    --surface: color-mix(in srgb, var(--ev-page, #FFF9F4) 6%, #ffffff);
    --surface-soft: color-mix(in srgb, var(--ev-page, #FFF9F4) 8%, #FFF9F4);
    --surface-border: color-mix(in srgb, var(--ev-page, #FFF9F4) 12%, #e5e7eb);
    --surface-text: #111827;

    background-color: var(--ev-page, #FFF9F4);
    color: var(--ev-text, #1F2937);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.gt-feed__shell { max-width: 42rem; margin: 0 auto; min-height: 100vh; position: relative; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.gt-feed__top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    height: 3.5rem; padding: 0 1rem;
    background: var(--surface); color: var(--surface-text);
    border-bottom: 1px solid var(--surface-border);
    backdrop-filter: blur(12px);
}
.gt-feed__brand { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.gt-feed__brand i { font-size: .875rem; color: #374151; }
.gt-feed__brand span {
    font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-feed__acts { display: flex; align-items: center; gap: .75rem; color: #111827; }
.gt-feed__acts button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: 1.5rem; line-height: 1; }

/* ── Banner ──────────────────────────────────────────────────────────── */
.gt-feed__main { padding-bottom: 6rem; }
.gt-feed__banner {
    position: relative; width: 100%; height: 13rem; overflow: hidden;
    background: linear-gradient(135deg, #0a9482, #2c5e54);
}
@media (min-width: 768px) { .gt-feed__banner { height: 16rem; } }
.gt-feed__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gt-feed__bannerph {
    position: absolute; inset: 0; display: grid; place-items: center;
}
.gt-feed__bannerph i {
    display: grid; place-items: center;
    width: 5rem; height: 5rem; border-radius: 1rem;
    background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px);
    color: #fff; font-size: 1.875rem;
}
.gt-feed__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 50%, transparent);
}
.gt-feed__bannertext { position: absolute; left: 1rem; right: 1rem; bottom: .75rem; color: #fff; }
.gt-feed__bannertext h1 {
    display: flex; align-items: center; gap: .375rem;
    margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.gt-feed__bannertext h1 i { font-size: 1rem; opacity: .9; }
@media (min-width: 768px) { .gt-feed__bannertext h1 { font-size: 1.875rem; } }
.gt-feed__bannertext p {
    display: flex; align-items: center; gap: .375rem;
    margin: .125rem 0 0; font-size: .875rem; font-weight: 500;
    color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.gt-feed__bannertext p i { font-size: .75rem; }

/* ── Profile block ───────────────────────────────────────────────────── */
.gt-feed__profile { padding: 1rem; }
.gt-feed__meta { line-height: 1.375; }
.gt-feed__kind { display: flex; align-items: center; gap: .375rem; margin: 0; font-size: .875rem; opacity: .7; }
.gt-feed__kind i { font-size: .75rem; }
.gt-feed__venue {
    display: inline-flex; align-items: center; gap: .375rem;
    margin-top: .125rem; font-size: .875rem; font-weight: 600;
    color: var(--ev-accent, #317265); text-decoration: none;
}
.gt-feed__venue:hover { text-decoration: underline; }
.gt-feed__venue i { font-size: .75rem; }
.gt-feed__welcome { margin: .25rem 0 0; font-size: .875rem; opacity: .8; }

.gt-feed__stats {
    display: grid; text-align: center; margin-top: 1rem;
    background: var(--surface-soft); color: var(--surface-text);
    border: 1px solid var(--surface-border); border-radius: 1rem;
    padding: .75rem 0;
}
.gt-feed__stats div + div { border-left: 1px solid var(--surface-border); }
.gt-feed__stats b { display: block; font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.gt-feed__stats span { font-size: .75rem; opacity: .6; }

.gt-feed__actions { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.gt-feed__cta,
.gt-feed__btn {
    flex: 1 1 0; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 0; border-radius: .5rem; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none;
}
.gt-feed__cta { background: var(--ev-accent, #317265); color: var(--ev-accent-text, #ffffff); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.gt-feed__btn { background: #f3f4f6; color: #1f2937; }
.gt-feed__btn--sq { flex: 0 0 2.5rem; }

/* ── Highlights rail ─────────────────────────────────────────────────── */
.gt-feed__rail { display: flex; gap: 1rem; overflow-x: auto; padding: 1.25rem 1rem .25rem; }
.gt-feed__hl {
    flex: 0 0 auto; width: 4rem;
    display: flex; flex-direction: column; align-items: center; gap: .375rem;
    background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit;
}
.gt-feed__hlcircle {
    display: grid; place-items: center;
    width: 4rem; height: 4rem; border-radius: 50%;
    background: var(--surface-soft); border: 1px solid var(--surface-border);
    color: var(--ev-accent, #317265); font-size: 1.25rem;
}
.gt-feed__hllabel {
    width: 100%; text-align: center;
    font-size: .6875rem; font-weight: 500; opacity: .8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.gt-feed__tabs {
    position: sticky; top: 3.5rem; z-index: 20; margin-top: .75rem;
    background: var(--surface); color: var(--surface-text);
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
}
.gt-feed__tabs > div { display: grid; }
.gt-feed__tabs .gt-tab {
    height: 2.75rem; display: grid; place-items: center;
    background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: -1px; cursor: pointer;
    color: #9ca3af; font-size: 1.125rem;
    transition: color .15s ease, border-color .15s ease;
}
.gt-feed__tabs .gt-tab--on { color: var(--surface-text); border-bottom-color: var(--ev-accent, #317265); }

/* ── Gallery ─────────────────────────────────────────────────────────── */
/* Scoped: .gt-grid is guest::partials.gallery's default grid class, so keep
   it under .gt-feed rather than letting it leak into other templates. */
.gt-feed .gt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.gt-feed .gt-tile { aspect-ratio: 1; }

/* ── Shared content sections ─────────────────────────────────────────── */
.gt-feed .gt-section { padding: 1.25rem 1rem 6rem; }
.gt-feed .gt-section__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; }
.gt-feed .gt-panel {
    background: var(--surface); color: var(--surface-text);
    border: 1px solid var(--surface-border); border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    max-width: 42rem; margin-inline: auto;
}
.gt-feed .gt-mono { font-family: ui-monospace, Consolas, monospace; }

/* Menu */
.gt-feed .gt-menu__list { display: grid; gap: 1rem; }
.gt-feed .gt-menu__catname {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: var(--ev-accent, #317265);
}
.gt-menu__items { list-style: none; margin: 0; padding: 0; }
.gt-feed .gt-menu__item { padding: .625rem 0; border-top: 1px solid var(--surface-border); }
.gt-feed .gt-menu__item:first-child { border-top: 0; }
.gt-menu__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.gt-menu__name { font-weight: 500; }
.gt-menu__price { flex: 0 0 auto; font-size: .875rem; opacity: .6; }
.gt-menu__desc { margin: .125rem 0 0; font-size: .875rem; opacity: .6; }
.gt-menu__allergens { margin: .125rem 0 0; font-size: .75rem; color: #b45309; }
.gt-menu__notes { margin: .125rem 0 0; font-size: .75rem; font-style: italic; opacity: .5; }
.gt-menu__empty { font-size: .875rem; font-style: italic; opacity: .5; }

/* Timeline */
.gt-timeline__list { list-style: none; margin: 0; padding: 0 0 0 1.25rem; position: relative; }
.gt-feed .gt-timeline__list { border-left: 1px solid var(--surface-border); margin-left: .5rem; }
.gt-timeline__item { position: relative; padding-bottom: 1.25rem; }
.gt-timeline__item:last-child { padding-bottom: 0; }
.gt-feed .gt-timeline__dot {
    position: absolute; left: -1.75rem; top: .35rem;
    width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--ev-accent, #317265); border: 2px solid var(--surface);
}
.gt-timeline__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.gt-feed .gt-timeline__time { font-size: .875rem; font-weight: 700; color: var(--ev-accent, #317265); }
.gt-timeline__title { font-weight: 600; }
.gt-timeline__desc { margin: .125rem 0 0; font-size: .875rem; opacity: .6; }

/* Gift */
.gt-gift__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.gt-gift__icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--ev-accent, #317265); color: var(--ev-accent-text, #ffffff); font-size: 1.125rem;
}
.gt-gift__title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.gt-gift__message { margin: 0 0 1rem; font-size: .875rem; opacity: .8; white-space: pre-line; }
.gt-gift__rows { display: grid; gap: .5rem; }
.gt-feed .gt-gift__row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .625rem .75rem;
    background: var(--surface-soft);
    border: 1px solid var(--surface-border); border-radius: .75rem;
}
.gt-gift__val { min-width: 0; }
.gt-gift__label { margin: 0; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; opacity: .5; }
.gt-gift__value { margin: 0; font-size: .875rem; font-weight: 600; word-break: break-all; }
.gt-gift__copy {
    flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center; border-radius: .5rem;
    background: #f3f4f6; color: #374151; border: 0; cursor: pointer;
}
.gt-gift__copy.gt-copied { color: #16a34a; }
.gt-gift__note { display: flex; align-items: center; gap: .375rem; margin: 1rem 0 0; font-size: .75rem; opacity: .5; }

/* Guestbook */
.gt-feed .gt-guestbook { padding: 1.25rem 1rem 6rem; display: grid; gap: .75rem; }
.gt-guestbook__list { display: grid; gap: .75rem; }
.gt-guestbook__greeting { display: flex; align-items: center; gap: .75rem; }
.gt-guestbook__greeting audio { flex: 1; min-width: 0; }
.gt-guestbook__icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(224, 107, 75, .1); color: #E06B4B;
}
.gt-feed .gt-entry { padding: 1rem; }
.gt-entry__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.gt-entry__icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: rgba(224, 107, 75, .1); color: #E06B4B; font-size: .75rem;
}
.gt-entry__name { margin: 0; font-size: .875rem; font-weight: 600; }
.gt-entry__prompt { margin: 0 0 .5rem; font-size: .75rem; font-style: italic; opacity: .5; }
.gt-entry__message { margin: 0; font-size: .875rem; white-space: pre-line; }
.gt-entry__audio { width: 100%; margin-top: .5rem; }
.gt-entry__video { width: 100%; max-height: 20rem; margin-top: .5rem; border-radius: .5rem; background: #000; }
.gt-entry__time { margin: .25rem 0 0; font-size: .75rem; opacity: .45; }

/* ── Bottom nav ──────────────────────────────────────────────────────── */
.gt-feed__nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--surface); color: var(--surface-text);
    border-top: 1px solid var(--surface-border);
    backdrop-filter: blur(12px);
}
.gt-feed__nav > div {
    max-width: 42rem; margin: 0 auto; height: 3.5rem;
    display: flex; align-items: center; justify-content: space-around;
}
.gt-feed__navitem {
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
    font: inherit; font-size: .75rem; color: #9ca3af;
}
.gt-feed__navitem i { font-size: 1.125rem; }
.gt-feed__navitem--on { color: var(--ev-accent, #317265); }
.gt-feed__navadd { background: none; border: 0; padding: 0; cursor: pointer; }
.gt-feed__navadd > span {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem; margin-top: -.75rem; padding: 2px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, var(--ev-accent, #317265), color-mix(in srgb, var(--ev-accent, #317265) 55%, #000) 50%, var(--ev-accent, #317265));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2);
}
.gt-feed__navadd > span > span {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: var(--ev-accent, #317265); color: var(--ev-accent-text, #ffffff);
}

/* ── Entry animation ─────────────────────────────────────────────────── */
@keyframes gt-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gt-fade { animation: gt-fade-up .25s ease both; }

/* ── Secondary pages ─────────────────────────────────────────────────── */
.gt-feed .gt-card { background: var(--surface); color: var(--surface-text); border: 1px solid var(--surface-border); }
.gt-feed .gt-card__icon { border-radius: 1rem; }