/* ================================================
   Wedding Riviera — Standard Wedding Theme
   Palette: ivory paper · warm gold · ink
   Fonts:   Cormorant Garamond (everything) + Imperial Script (signature)
   Style:   Editorial Aegean-luxe — ink-engraved ghost type, an arch-framed
            photo, a shimmering gold save-the-date, a dotted itinerary trail
            and rotated Polaroid-style chapters. Cloned from an external
            reference's CSS technique with the app's own layout primitives and
            entirely new photography.
   ================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --tr-paper:      #fbfaf7;
    --tr-cloud:      #f4efe7;
    --tr-ink:        #201d18;
    --tr-ink-soft:   #8c857a;
    --tr-gold:       #b08d57;
    --tr-gold-soft:  #c2a36b;
    --tr-gold-deep:  #9a7b45;
    --tr-line:       rgba(32, 29, 24, .14);

    --radius:        18px;
    --btn-radius:    999px;

    --ff-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ff-script:  'Imperial Script', cursive;
}

.tr-page {
    position: relative;
    background: var(--tr-paper);
    color: var(--tr-ink);
    font-family: var(--ff-display);
    overflow-x: clip;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.tr-page ::selection { background: rgba(176, 141, 87, .22); color: var(--tr-ink); }

.tr-container {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0;
}

.tr-container--sm {
    max-width: 28rem;
}

/* ── Paper grain ── */
.tr-grain {
    position: fixed;
    inset: 0;
    z-index: 5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .03;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* ── Ghost / ink-engraved outline type ── */
.tr-ghost {
    color: transparent;
    -webkit-text-stroke: 1px rgba(176, 141, 87, .32);
}

/* ── Hairline rules ── */
.tr-rule {
    display: block;
    height: 1px;
    width: 6rem;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--tr-line) 18%, var(--tr-line) 82%, transparent);
}

.tr-rule--sm { width: 4rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.tr-rule--flank { flex: 1 1 auto; width: auto; max-width: 3rem; }

.tr-vrule {
    width: 1px;
    height: 4rem;
    flex: none;
    background: linear-gradient(180deg, transparent, var(--tr-line) 22%, var(--tr-line) 78%, transparent);
}

.tr-eyebrow {
    font-size: .68rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--tr-gold-deep);
    padding-left: .4em;
    margin-bottom: .75rem;
}

.tr-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 2rem;
}

.tr-eyebrow-row .tr-eyebrow { margin-bottom: 0; }

.tr-section-head { text-align: center; margin-bottom: 2.5rem; }

.tr-section-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: var(--tr-ink);
}

.tr-card {
    background: rgba(251, 250, 247, 1);
    border: 1px solid var(--tr-line);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(32, 29, 24, .12);
}

.tr-pill-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .7rem 1.4rem;
    border: 1px solid rgba(176, 141, 87, .45);
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--tr-ink);
    background: transparent;
    transition: transform .4s ease, background .4s ease, color .4s ease;
}

.tr-pill-link:hover {
    background: var(--tr-gold);
    color: #fff;
    transform: translateY(-1px);
}

/* ================================================
   DOORS INTRO
   ================================================ */
body.tr-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.tr-doors {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    cursor: pointer;
}

body.tr-has-doors .tr-doors { display: block; }

.tr-gate {
    height: 100vh;
    height: 100dvh;
    perspective: 1800px;
}

.tr-gate-inner {
    position: relative;
    height: 100%;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}

.tr-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background:
        linear-gradient(115deg, rgba(32, 29, 24, .028) 0%, transparent 30%, transparent 68%, rgba(176, 141, 87, .08) 100%),
        linear-gradient(180deg, #fcfbf8 0%, #f3eee4 100%);
    box-shadow: 0 0 0 1px rgba(32, 29, 24, .06) inset;
    transition: transform 1.1s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
}

.tr-door::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid var(--tr-line);
}

.tr-door--left {
    left: 0;
    transform-origin: left center;
    justify-content: flex-start;
}

.tr-door--left::before {
    border-right: 0;
}

.tr-door--right {
    right: 0;
    transform-origin: right center;
    justify-content: flex-end;
}

.tr-door--right::before {
    border-left: 0;
}


.tr-doors.is-open .tr-door--left { transform: rotateY(-108deg); }
.tr-doors.is-open .tr-door--right { transform: rotateY(108deg); }

.tr-doors__name {
    writing-mode: vertical-rl;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    letter-spacing: .16em;
    color: var(--tr-ink);
    padding: 0 1.75rem;
}

.tr-doors__name--left { transform: rotate(180deg); }

.tr-doors__center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    text-align: center;
    transition: opacity .5s ease;
}

.tr-doors.is-open .tr-doors__center { opacity: 0; }

.tr-doors__kicker {
    font-size: .68rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--tr-gold-deep);
    max-width: 12rem;
}

.tr-doors__date {
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tr-ink-soft);
}

/* ── Gold monogram medallion — shared by the doors + footer ── */
.tr-seal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    background: linear-gradient(148deg, #e8d2a2 0%, var(--tr-gold-soft) 30%, var(--tr-gold) 58%, var(--tr-gold-deep) 100%);
    box-shadow: 0 20px 44px -20px rgba(154, 123, 69, .8), 0 0 0 1px rgba(255, 255, 255, .45) inset;
}

.tr-seal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(165deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

.tr-seal__ring {
    position: absolute;
    inset: -.6rem;
    border-radius: 999px;
    border: 1px solid rgba(176, 141, 87, .4);
}

.tr-seal__mono {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--ff-display);
    font-size: 1.4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fdf3e6;
    text-shadow: 0 1px 2px rgba(80, 58, 24, .3);
}

.tr-seal__rule {
    display: inline-block;
    width: 1px;
    height: 1.1em;
    background: currentColor;
    opacity: .6;
    transform: rotate(16deg);
}

/* ── Gentle levitation ── */
@keyframes tr-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.tr-float { animation: tr-float 7s ease-in-out infinite; }

/* ── Slow cinematic zoom ── */
@keyframes tr-slow-zoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.16); }
}
.tr-slow-zoom { animation: tr-slow-zoom 22s ease-in-out infinite alternate; }

/* ================================================
   HERO
   ================================================ */
/* In the reference, the hero photo and the note card are both children of
   the SAME section/flex-column — its py-12/py-32 padding wraps the whole
   pair (top, above the photo; bottom, below the note card), with zero gap
   between the photo and the note card itself. Here they're two separate
   <section>s, so the "bottom" half of that padding belongs on .tr-note
   (after the card), not here — otherwise the note's negative margin has to
   fight through this padding before it even reaches the photo, and the
   actual overlap ends up depending on both values at once instead of being
   controlled purely by the margin (and drifting inconsistently between
   breakpoints when either one changes). See .tr-note below. */
.tr-hero {
    position: relative;
    padding: 5rem 1.5rem 0;
    overflow: hidden;
    text-align: center;
}

.tr-hero__watermark {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 20vw;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 0;
}

.tr-hero__frame {
    position: relative;
    z-index: 1;
    max-width: 28rem;
    margin: 0 auto;
}

/* The reference's outer frame is width:calc(72vw+3rem) capped at 408px, but
   that frame carries its own 1.5rem side padding — which exactly cancels the
   "+3rem" back out, so the photo itself always renders at a clean 72vw,
   capped at 408px-3rem = 360px (22.5rem). Expressing that effective width
   directly with min() instead of replicating the outer-frame/padding
   indirection. */
.tr-hero__photo-wrap {
    position: relative;
    width: min(72vw, 22.5rem);
    margin: 0 auto;
    aspect-ratio: 3 / 4.2;
}

.tr-arch { border-radius: 999px 999px 16px 16px; }

.tr-hero__photo-ring {
    position: absolute;
    inset: -.9rem;
    border: 1px solid rgba(32, 29, 24, .15);
    pointer-events: none;
}

.tr-hero__photo {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--tr-cloud);
}

.tr-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tr-hero--print .tr-hero__photo-ring,
.tr-hero--print .tr-slow-zoom,
.tr-hero--print .tr-float { animation: none; }

/* Print-only: the real, legible name + date/venue line — the print card has
   no note card or footer, so this is the only place the couple's name
   appears (see the doc comment atop hero.blade.php). Sized in mm by
   print/portrait.blade.php's own override; these are just sane fallbacks. */
.tr-hero__print-name {
    margin-top: 1.5rem;
    font-family: var(--ff-script);
    font-size: 2.4rem;
    text-align: center;
    color: var(--tr-ink);
}

.tr-hero__print-meta {
    text-align: center;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tr-ink-soft);
}

.tr-hero__qr { margin-top: 2rem; }

@media (min-width: 640px) {
    .tr-hero { padding: 8rem 1.5rem 0; }
}

/* ================================================
   NOTE ("Poruka za goste")
   ================================================ */
/* Matches the reference's own -mt-10 / sm:-mt-12 exactly (-2.5rem / -3rem).
   With .tr-hero's bottom padding now zero (see above), this overlaps the
   photo itself by exactly that amount at every breakpoint — no longer
   fighting through a separate, independently-changing padding value first.
   The bottom padding here (3rem / 8rem, matching .tr-hero's own top padding)
   is the other half of the reference's shared section padding — the gap
   before Save the Date, measured from after the note card, same as the
   reference measures it from after the whole hero+note group. */
.tr-note {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
    padding: 0 1.5rem 3rem;
}

.tr-note__card {
    padding: 3rem 2rem;
    text-align: center;
}

.tr-note__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.tr-note__text {
    font-size: 1.05rem;
    line-height: 1.95;
    color: var(--tr-ink-soft);
}

@media (min-width: 640px) {
    .tr-note { margin-top: -3rem; padding-bottom: 8rem; }
    .tr-note__card { padding: 3.5rem; }
}

/* ================================================
   SAVE THE DATE
   ================================================ */
.tr-save-date {
    position: relative;
    padding: 8rem 1.5rem;
    overflow: hidden;
}

.tr-save-date__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30rem;
    height: 30rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(176, 141, 87, .15), transparent 66%);
    filter: blur(24px);
    pointer-events: none;
}

.tr-plate-frame {
    position: relative;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(194, 163, 107, .62), rgba(32, 29, 24, .1) 34%, rgba(32, 29, 24, .05) 62%, rgba(194, 163, 107, .48));
    box-shadow: 0 34px 80px -34px rgba(32, 29, 24, .42);
}

.tr-plate {
    position: relative;
    border-radius: 29px;
    padding: 3rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(130% 90% at 50% -14%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #fdfcfa 0%, #f6f1e7 100%);
    overflow: hidden;
}

.tr-plate__date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.tr-plate__month,
.tr-plate__year {
    flex: 1;
    font-size: clamp(.6rem, 2.7vw, .75rem);
    letter-spacing: .3em;
    text-transform: uppercase;
}

.tr-plate__month { text-align: right; color: var(--tr-ink); }
.tr-plate__year { text-align: left; color: var(--tr-ink-soft); }

.tr-numeral {
    flex: none;
    font-family: var(--ff-display);
    font-size: clamp(3.4rem, 15vw, 5rem);
    line-height: .86;
    background-image: linear-gradient(100deg, #211e18 0%, #211e18 33%, #e7ce95 45%, var(--tr-gold) 53%, #4a3f2c 62%, #211e18 74%, #211e18 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: tr-shimmer 7s ease-in-out infinite;
}

@keyframes tr-shimmer {
    0%, 100% { background-position: 135% 0; }
    55%      { background-position: -35% 0; }
}

.tr-plate__venue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
    font-size: clamp(.6rem, 2.5vw, .7rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tr-ink-soft);
}

.tr-plate__pin { width: .9rem; height: .9rem; flex: none; color: var(--tr-gold); }

@media (min-width: 640px) {
    .tr-plate { padding: 3.5rem; }
}

/* ================================================
   COUNTDOWN
   ================================================ */
.tr-countdown { padding: 4rem 1.5rem; text-align: center; }

.tr-countdown__rings {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .75rem;
    margin-top: 3.5rem;
}

.tr-ring { display: flex; flex-direction: column; align-items: center; }

.tr-ring__svg {
    width: 4.75rem;
    height: 4.75rem;
    transform: rotate(-90deg);
}

.tr-ring__track {
    fill: none;
    stroke: rgba(32, 29, 24, .1);
    stroke-width: 1;
}

.tr-ring__progress {
    fill: none;
    stroke: var(--tr-gold);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.tr-ring__number {
    margin-top: -3.4rem;
    font-family: var(--ff-display);
    font-size: 1.5rem;
}

.tr-ring__label {
    margin-top: 2rem;
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tr-ink-soft);
}

.tr-countdown__date {
    margin-top: 3rem;
    font-size: 1rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tr-ink-soft);
}

@media (min-width: 640px) {
    .tr-ring__svg { width: 6.5rem; height: 6.5rem; }
    .tr-ring__number { margin-top: -4.4rem; font-size: 2rem; }
}

/* ================================================
   PROGRAMME ("The Day")
   ================================================ */
.tr-programme { padding: 4rem 1.5rem; }

.tr-trail { position: relative; }

/* Mobile-first: a single left rail (line + travelling ring both anchored at
   the same x) so stop content never has to share horizontal space with the
   badge — see the >=700px override below for the centered zigzag spine.
   Straight line — a fine repeating-gradient dash rather than the bigger
   native SVG stroke-dasharray dots, so the dash size is exact and
   independent of the line's rendered length. */
.tr-trail__line {
    position: absolute;
    left: 1.7rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(176, 141, 87, .55) 0,
        rgba(176, 141, 87, .55) 2px,
        transparent 2px,
        transparent 8px
    );
    pointer-events: none;
}

/* Sticks near the vertical center of the viewport and travels down the line
   as the page scrolls through .tr-trail's height (position: sticky, no JS) —
   it can only stick while its container .tr-trail is passing through the
   viewport, so it arrives with the first stop and leaves with the last. */
.tr-trail__badge {
    position: sticky;
    top: 50vh;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    padding-left: .325rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.tr-trail__badge-ring {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(176, 141, 87, .5);
    background: rgba(251, 250, 247, .75);
    box-shadow: 0 5px 10px rgba(154, 123, 69, .4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tr-trail__rings {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: var(--tr-gold);
    stroke-width: 2.4;
}

.tr-trail__row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 11rem;
    padding-left: 4.4rem;
    padding-bottom: 2rem;
}

.tr-trail__content { width: 100%; text-align: left; }

.tr-trail__time {
    margin: 1rem 0;
    font-family: var(--ff-display);
    font-size: clamp(2.2rem, 9vw, 2.8rem);
    color: rgba(32, 29, 24, .13);
}

.tr-trail__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 4vw, 1.5rem);
    margin-top: -.35em;
}

.tr-trail__loc {
    margin-top: .5rem;
    font-size: .95rem;
    color: var(--tr-ink-soft);
}

/* >=700px: alternating zigzag either side of a centered spine (same collapse
   breakpoint as the shared .st-timeline component). Stops are kept clear of
   the center badge with a calc(50% + gap) padding on the row rather than a
   percentage-width column, so content can never crowd the badge regardless
   of viewport — .tr-container--sm caps out at 28rem even on wide screens. */
@media (min-width: 700px) {
    .tr-trail__line {
        left: 50%;
        transform: translateX(-50%);
    }

    .tr-trail__badge {
        justify-content: center;
        padding-left: 0;
    }

    .tr-trail__row {
        min-height: 14rem;
        padding-left: 0;
    }

    .tr-trail__row--right { justify-content: flex-end; padding-right: calc(50% + 1.85rem); }
    .tr-trail__row--right .tr-trail__content { text-align: left; }

    .tr-trail__row--left { justify-content: flex-start; padding-left: calc(50% + 1.85rem); }
    .tr-trail__row--left .tr-trail__content { text-align: right; }
}

/* ================================================
   OUR CHAPTERS
   ================================================ */
.tr-chapters { padding: 4rem 1.5rem; }
.tr-wedding-party { padding: 4rem 1.5rem; }

.tr-chapters__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 26rem;
    margin: 0 auto;
}

.tr-chapter {
    position: relative;
    aspect-ratio: 4 / 5;
    transform: rotateZ(var(--tr-chapter-rotate, 0deg));
}

.tr-chapter > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 34px 70px -34px rgba(32, 29, 24, .6);
    outline: 1px solid rgba(32, 29, 24, .08);
    transition: transform 1.2s ease;
}

.tr-chapter:hover > img { transform: scale(1.06); }

.tr-chapter::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(0deg, rgba(20, 17, 12, .62), transparent 55%);
    pointer-events: none;
}

.tr-chapter figcaption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
}

.tr-chapter__index {
    font-family: var(--ff-display);
    font-size: .82rem;
    letter-spacing: .18em;
    color: var(--tr-gold-soft);
}

.tr-chapter__rule {
    display: inline-block;
    height: 1px;
    width: 1.5rem;
    background: rgba(255, 255, 255, .4);
}

.tr-chapter__label {
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

@media (min-width: 640px) {
    .tr-chapters__grid { grid-template-columns: 1fr 1fr; max-width: none; }
    .tr-chapters__grid > .tr-chapter:nth-child(2) { margin-top: 3.5rem; }
}

/* ================================================
   GALLERY (shared <x-gallery-grid> reskin)
   ================================================ */
.tr-gallery { padding: 4rem 1.5rem; }
.tr-gallery .gg-item { border-radius: 8px; }

/* ================================================
   VENUE
   ================================================ */
.tr-venue { padding: 4rem 1.5rem; text-align: center; }

.tr-venue__address {
    font-size: 1rem;
    color: var(--tr-ink-soft);
    margin-bottom: 1.5rem;
}

.tr-venue__map {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--tr-line);
}

.tr-venue__map iframe { width: 100%; height: 100%; border: 0; }

/* ================================================
   DRESS CODE / GOOD TO KNOW / ACCOMMODATION
   ================================================ */
.tr-dress-code,
.tr-good-to-know,
.tr-accommodation,
.tr-gallery-upload,
.tr-guest-wall,
.tr-album { padding: 4rem 1.5rem; text-align: center; }

/* Good to Know — a plain divided list, no cards, so it reads distinctly
   from Accommodation's bordered cards right below it. */
.tr-good-to-know .gtk-grid {
    display: block;
    max-width: 30rem;
    margin: 2rem auto 0;
    text-align: left;
}

.tr-good-to-know .gtk-card {
    background: none;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--tr-line);
    border-radius: 0;
}

.tr-good-to-know .gtk-card:last-child { border-bottom: 0; }

.tr-good-to-know .gtk-card__icon { color: var(--tr-gold); }

.tr-good-to-know .gtk-card__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.1rem;
}

.tr-good-to-know .gtk-card__text {
    color: var(--tr-ink-soft);
    opacity: 1;
}

/* Accommodation — bordered ivory cards with a gold top rule, so it doesn't
   repeat Good to Know's look right above it. */
.tr-accommodation .accom-grid {
    display: block;
    max-width: 30rem;
    margin: 2rem auto 0;
}

.tr-accommodation .accom-card {
    position: relative;
    text-align: left;
    background: var(--tr-cloud);
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    padding: 1.75rem;
    overflow: hidden;
}

.tr-accommodation .accom-card + .accom-card { margin-top: 1.5rem; }

.tr-accommodation .accom-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tr-gold-soft), var(--tr-gold-deep));
}

.tr-accommodation .accom-card__icon { color: var(--tr-gold); }

.tr-accommodation .accom-card__name {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.2rem;
}

.tr-accommodation .accom-card__address,
.tr-accommodation .accom-card__note { color: var(--tr-ink-soft); }

.tr-accommodation .accom-card__link { color: var(--tr-gold-deep); }

/* Guest wall — one message at a time, no card/border/background: just the
   quote and name floating on the page's own ground. */
.tr-testimonials__swiper {
    max-width: 34rem;
    margin: 2rem auto 0;
}

.tr-testimonials__slide { padding: 0 0 3rem; }

.tr-testimonials__quote {
    position: relative;
    padding: 0 2.5rem;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.9;
    color: var(--tr-ink-soft);
}

.tr-testimonials__quote::before,
.tr-testimonials__quote::after {
    content: '\201C';
    position: absolute;
    top: -.6rem;
    left: 0;
    font-family: var(--ff-display);
    font-style: normal;
    font-size: 2.6rem;
    color: var(--tr-gold-soft);
}

.tr-testimonials__quote::after {
    content: '\201D';
    left: auto;
    right: 0;
}

.tr-testimonials__author {
    margin-top: 1.5rem;
    font-family: var(--ff-display);
    font-size: 1rem;
    color: var(--tr-gold-deep);
}

.tr-testimonials__swiper .swiper-pagination-bullet {
    background: var(--tr-gold);
    opacity: .35;
}

.tr-testimonials__swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

.tr-album__sub { color: var(--tr-ink-soft); margin-top: .5rem; }

/* ================================================
   RSVP
   ================================================ */
.tr-rsvp { padding: 4rem 1.5rem; }

.tr-rsvp .rsvp-title { margin-bottom: 0; text-align: center; }

.tr-form .form__group { margin-bottom: 1.75rem; }

.tr-form .form__group label,
.tr-form .form__label-text {
    display: block;
    font-size: .85rem;
    color: var(--tr-ink-soft);
    margin-bottom: .4rem;
}

.tr-form .form__group input[type="text"],
.tr-form .form__group input[type="email"],
.tr-form .form__group input[type="tel"],
.tr-form .form__group input[type="number"],
.tr-form .form__group textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--tr-line);
    border-radius: 0;
    background: transparent;
    padding: .6rem 0;
    font-family: var(--ff-display);
    font-size: 1rem;
    color: var(--tr-ink);
}

.tr-form .form__group input:focus,
.tr-form .form__group textarea:focus {
    outline: none;
    border-bottom-color: var(--tr-gold);
}

.tr-rsvp .rsvp-cta {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.tr-rsvp .rsvp-btn-attend,
.tr-rsvp .rsvp-btn-decline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-radius: 999px;
    font-family: var(--ff-display);
    font-size: .95rem;
}

.tr-rsvp .rsvp-btn-decline {
    background: transparent;
    border: 1px solid var(--tr-line);
    color: var(--tr-ink);
}

.tr-rsvp .rsvp-btn-decline.active {
    border-color: rgba(176, 141, 87, .7);
    background: rgba(176, 141, 87, .1);
}

.tr-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tr-gold-soft), var(--tr-gold), var(--tr-gold-deep));
    color: #fff;
    font-family: var(--ff-display);
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 18px 44px -14px rgba(154, 123, 69, .65);
    transition: transform .4s ease, box-shadow .4s ease;
}

.tr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 54px -14px rgba(154, 123, 69, .75);
}

.tr-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: tr-sheen 3.6s cubic-bezier(.5, 0, .3, 1) infinite;
    pointer-events: none;
}

@keyframes tr-sheen {
    0%   { transform: translateX(-130%) skewX(-16deg); }
    100% { transform: translateX(260%) skewX(-16deg); }
}

/* ================================================
   FOOTER
   ================================================ */
.tr-footer {
    padding: 4rem 1.5rem;
    text-align: center;
}

.tr-footer__seal { margin: 0 auto 2rem; }

.tr-footer__text {
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.9;
    color: var(--tr-ink-soft);
    max-width: 26rem;
    margin: 0 auto 2rem;
}

.tr-footer__script {
    font-family: var(--ff-script);
    font-size: clamp(2.6rem, 10vw, 4rem);
    letter-spacing: .04em;
    color: var(--tr-ink);
    margin-bottom: 1.5rem;
}

.tr-footer__date {
    font-size: .7rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--tr-gold-deep);
}

.tr-footer__cal { margin-top: 1.5rem; }