/* ========================================
   Spectator Ticket Management Section
   ======================================== */

.equibook-spectator-section {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f3 50%, #f5f2eb 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

/* Animated ambient background */
.equibook-spectator-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background:
        radial-gradient(circle at 12% 25%, rgba(197, 166, 83, 0.10) 0%, transparent 42%),
        radial-gradient(circle at 88% 75%, rgba(197, 166, 83, 0.08) 0%, transparent 42%),
        radial-gradient(circle at 55% 50%, rgba(157, 34, 34, 0.035) 0%, transparent 50%);
    pointer-events: none;
    animation: spectatorFloat 24s ease-in-out infinite;
    z-index: 0;
}

@keyframes spectatorFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(18px, -18px) rotate(1deg);
    }

    66% {
        transform: translate(-18px, 18px) rotate(-1deg);
    }
}

/* Soft corner glow */
.equibook-spectator-section::after {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(197, 166, 83, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.equibook-spectator-section .container {
    position: relative;
    z-index: 2;
}

/* ---------- Section header ---------- */
.equibook-spectator-label {
    color: #C5A653;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.equibook-spectator-title {
    font-size: 44px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 22px;
    line-height: 1.2;
}

.equibook-spectator-title .accent {
    color: #C5A653;
    position: relative;
    display: inline-block;
}

.equibook-spectator-title .accent::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #C5A653 25%, #C5A653 75%, transparent 100%);
    border-radius: 3px;
}

.equibook-spectator-subtitle {
    font-size: 16px;
    color: #666;
    max-width: 780px;
    margin: 0 auto 60px;
    line-height: 1.9;
}

/* ---------- Layout: 2 x 2 grid (matches the features section) ---------- */
.spectator-journey {
    position: relative;
    padding: 10px 0 0;
}

.spectator-steps {
    list-style: none;
    padding: 0;
    margin: 0 -15px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Two cards per row */
.spectator-step {
    position: relative;
    width: 50%;
    padding: 0 15px;
    margin-bottom: 30px;
    display: flex;
}

.spectator-step:nth-last-child(-n+2) {
    margin-bottom: 0;
}

.spectator-step:hover {
    z-index: 4;
}

/* ---------- Ticket UI ---------- */
/* The ticket keeps the exact footprint of the old card: it fills the
   grid cell, so the 2 x 2 placement is unchanged.
   */
/* Scalloped stamp edges: a repeating row of half-circles is subtracted from
   the card down the full height of the left and right edges. The scallop
   layers tile vertically (mask-repeat: repeat-y) and are cut out of the
   opaque base layer with mask-composite: exclude, so whatever sits behind
   the ticket shows through each notch. */
/* Scalloped stamp edges plus the tear-line notches: an opaque base layer has
   three things subtracted from it (mask-composite: exclude) -- a repeating
   row of half-circles down the left edge, the same down the right edge, and
   a single notch at the top and bottom of the perforation. Whatever sits
   behind the ticket shows through every cut. */
.spectator-ticket {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf7 55%, #fdf9ee 100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s ease;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.07));

    /* Scallop radius and vertical pitch (one notch per --scallop-step) */
    --scallop-r: 10px;
    --scallop-step: 24px;
    /* Tear-line notch radius */
    --notch-r: 11px;

    -webkit-mask-image:
        linear-gradient(#000, #000),
        radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
        radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
        radial-gradient(circle var(--notch-r) at 50% 0, #000 99%, transparent 100%),
        radial-gradient(circle var(--notch-r) at 50% 100%, #000 99%, transparent 100%);
    -webkit-mask-size:
        100% 100%,
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2);
    -webkit-mask-position:
        0 0,
        left top,
        right top,
        calc(var(--stub-w, 122px) - var(--notch-r)) top,
        calc(var(--stub-w, 122px) - var(--notch-r)) bottom;
    -webkit-mask-repeat: no-repeat, repeat-y, repeat-y, no-repeat, no-repeat;
    -webkit-mask-composite: xor;

    mask-image:
        linear-gradient(#000, #000),
        radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
        radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
        radial-gradient(circle var(--notch-r) at 50% 0, #000 99%, transparent 100%),
        radial-gradient(circle var(--notch-r) at 50% 100%, #000 99%, transparent 100%);
    mask-size:
        100% 100%,
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2);
    mask-position:
        0 0,
        left top,
        right top,
        calc(var(--stub-w, 122px) - var(--notch-r)) top,
        calc(var(--stub-w, 122px) - var(--notch-r)) bottom;
    mask-repeat: no-repeat, repeat-y, repeat-y, no-repeat, no-repeat;
    mask-composite: exclude;
}

/* Straight hairline borders on the top and bottom only -- the left and
   right edges are described by the scallop arcs below. */
.spectator-ticket::before {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(197, 166, 83, 0.3);
    border-bottom: 1px solid rgba(197, 166, 83, 0.3);
    pointer-events: none;
    transition: border-color 0.45s ease;
    z-index: 5;
}

/* Gold arcs tracing every scallop down both edges */
.spectator-ticket::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
        radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2),
            transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px)),
        radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2),
            transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px)),
        radial-gradient(circle var(--notch-r) at 50% 0,
            transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px)),
        radial-gradient(circle var(--notch-r) at 50% 100%,
            transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px));
    background-size:
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--scallop-r) * 2) var(--scallop-step),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2),
        calc(var(--notch-r) * 2) calc(var(--notch-r) * 2);
    background-position:
        left top,
        right top,
        calc(var(--stub-w, 122px) - var(--notch-r)) top,
        calc(var(--stub-w, 122px) - var(--notch-r)) bottom;
    background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
    transition: opacity 0.45s ease;
}

.spectator-step:hover .spectator-ticket {
    transform: translateY(-8px);
    filter: drop-shadow(0 18px 26px rgba(197, 166, 83, 0.3));
}

.spectator-step:hover .spectator-ticket::before {
    border-color: rgba(197, 166, 83, 0.6);
}

/* Oversized ghost numeral watermark, kept inside the ticket outline */
.ticket-body::after {
    content: attr(data-ghost);
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-58%);
    font-size: 72px;
    font-weight: 700;
    line-height: 0.85;
    color: rgba(197, 166, 83, 0.08);
    pointer-events: none;
    transition: all 0.45s ease;
    z-index: 0;
}

.spectator-step:hover .ticket-body::after {
    color: rgba(197, 166, 83, 0.15);
    transform: translateY(-62%);
}

/* ---------- Left stub ---------- */
.ticket-stub {
    flex: 0 0 122px;
    width: 122px;
    padding: 26px 12px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, rgba(197, 166, 83, 0.14) 0%, rgba(197, 166, 83, 0.04) 100%);
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.ticket-stub-num {
    display: block;
    margin-top: 12px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #C5A653;
    letter-spacing: 1px;
    transition: color 0.45s ease;
}

.ticket-stub-label {
    display: block;
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: #b9b2a0;
}

.spectator-step:hover .ticket-stub-num {
    color: #9a7f36;
}

/* ---------- Perforated tear line ---------- */
/* Runs edge to edge so the cuts meet the top and bottom borders. */
.ticket-perforation {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 122px;
    width: 2px;
    margin-left: -1px;
    background-image: linear-gradient(180deg, rgba(197, 166, 83, 0.65) 55%, transparent 55%);
    background-size: 2px 9px;
    background-repeat: repeat-y;
    z-index: 3;
    transition: background-image 0.45s ease;
}

.spectator-step:hover .ticket-perforation {
    background-image: linear-gradient(180deg, rgba(197, 166, 83, 0.95) 55%, transparent 55%);
}

/* ---------- Right body ---------- */
.ticket-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 26px 20px 28px;
    position: relative;
    z-index: 2;
}

.ticket-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ticket-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed rgba(197, 166, 83, 0.6);
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #9a7f36;
    background: rgba(197, 166, 83, 0.07);
    white-space: nowrap;
    transition: all 0.45s ease;
}

.spectator-step:hover .ticket-tag {
    background: #C5A653;
    border-color: #C5A653;
    color: #ffffff;
}


/* Icon keeps its original look, just centred in the stub */
.spectator-step-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px 6px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(197, 166, 83, 0.2) 0%, rgba(197, 166, 83, 0.06) 100%);
    position: relative;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.spectator-step:hover .spectator-step-icon {
    background: linear-gradient(135deg, #C5A653 0%, #b3934a 100%);
    box-shadow: 0 10px 22px rgba(197, 166, 83, 0.32);
}

.spectator-step-icon svg {
    width: 26px;
    height: 26px;
    color: #C5A653;
    transition: color 0.45s ease;
    position: relative;
    z-index: 2;
}

.spectator-step:hover .spectator-step-icon svg {
    color: #ffffff;
}

.spectator-step-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.35;
    transition: color 0.4s ease;
}

.spectator-step:hover .spectator-step-title {
    color: #9a7f36;
}

.spectator-step-text {
    font-size: 14.5px;
    color: #666;
    line-height: 1.8;
    margin: 0;
    position: relative;
    z-index: 2;
}


/* ---------- Responsive ---------- */
/* The stub width and the perforation must always line up, so they are
   re-declared together at every breakpoint. */
@media (max-width: 1199px) {
    .spectator-ticket {
        --stub-w: 104px;
    }

    .ticket-stub {
        flex: 0 0 104px;
        width: 104px;
        padding: 22px 10px 20px;
    }

    .ticket-perforation {
        left: 104px;
    }

    .ticket-body {
        padding: 22px 22px 18px 24px;
    }

    .spectator-step-title {
        font-size: 18.5px;
    }
}

@media (max-width: 991px) {
    .equibook-spectator-section {
        padding: 60px 0;
    }

    .equibook-spectator-title {
        font-size: 34px;
    }

}

@media (max-width: 767px) {
    .equibook-spectator-section {
        padding: 48px 0;
    }

    .equibook-spectator-title {
        font-size: 27px;
    }

    .equibook-spectator-subtitle {
        font-size: 15px;
        margin-bottom: 40px;
    }

    /* Single column */
    .spectator-step {
        width: 100%;
        margin-bottom: 22px;
    }

    .spectator-step:nth-last-child(-n+2) {
        margin-bottom: 22px;
    }

    .spectator-step:last-child {
        margin-bottom: 0;
    }

    .spectator-ticket {
        --stub-w: 92px;
    }

    .ticket-stub {
        flex: 0 0 92px;
        width: 92px;
        padding: 20px 8px 18px;
    }

    .ticket-perforation {
        left: 92px;
    }

    .ticket-body {
        padding: 20px 18px 16px 20px;
    }

    .ticket-stub-num {
        font-size: 25px;
        margin-top: 10px;
    }

    .spectator-step-icon {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .spectator-step-icon svg {
        width: 23px;
        height: 23px;
    }

    .spectator-step-title {
        font-size: 17.5px;
    }



}

/* Very narrow phones: stub stacks above the body, tear line goes
   horizontal so nothing gets crushed. */
@media (max-width: 420px) {
    .spectator-ticket {
        flex-direction: column;
    }

    /* Stub becomes a header strip: icon and number sit side by side, and
       its tint follows the now-horizontal tear line. */
    .ticket-stub {
        flex: 0 0 76px;
        width: 100%;
        height: 76px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 0 18px;
    }

    .ticket-stub-num {
        margin-top: 0;
        font-size: 24px;
    }

    .ticket-stub-label {
        margin-top: 0;
        margin-left: -8px;
        align-self: center;
        padding-top: 8px;
    }

    .ticket-perforation {
        left: 12px;
        right: 12px;
        top: 76px;
        bottom: auto;
        width: auto;
        height: 2px;
        margin-left: 0;
        margin-top: -1px;
        background-image: linear-gradient(90deg, rgba(197, 166, 83, 0.65) 55%, transparent 55%);
        background-size: 9px 2px;
        background-repeat: repeat-x;
    }

    .spectator-step:hover .ticket-perforation {
        background-image: linear-gradient(90deg, rgba(197, 166, 83, 0.95) 55%, transparent 55%);
    }

    .ticket-body {
        padding: 22px 18px 16px;
    }

    /* The tear line is horizontal here and would run into the side
       scallops, so drop its two notches and keep just the dotted line.
       The side scallops themselves already run the full height. */
    .spectator-ticket {
        -webkit-mask-image:
            linear-gradient(#000, #000),
            radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
            radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2), #000 99%, transparent 100%);
        -webkit-mask-size:
            100% 100%,
            calc(var(--scallop-r) * 2) var(--scallop-step),
            calc(var(--scallop-r) * 2) var(--scallop-step);
        -webkit-mask-position: 0 0, left top, right top;
        -webkit-mask-repeat: no-repeat, repeat-y, repeat-y;

        mask-image:
            linear-gradient(#000, #000),
            radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2), #000 99%, transparent 100%),
            radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2), #000 99%, transparent 100%);
        mask-size:
            100% 100%,
            calc(var(--scallop-r) * 2) var(--scallop-step),
            calc(var(--scallop-r) * 2) var(--scallop-step);
        mask-position: 0 0, left top, right top;
        mask-repeat: no-repeat, repeat-y, repeat-y;
    }

    .spectator-ticket::after {
        background:
            radial-gradient(circle var(--scallop-r) at 0 calc(var(--scallop-step) / 2),
                transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px)),
            radial-gradient(circle var(--scallop-r) at 100% calc(var(--scallop-step) / 2),
                transparent calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 1.2px), rgba(197, 166, 83, 0.3) calc(100% - 0.2px), transparent calc(100% - 0.2px));
        background-size:
            calc(var(--scallop-r) * 2) var(--scallop-step),
            calc(var(--scallop-r) * 2) var(--scallop-step);
        background-position: left top, right top;
        background-repeat: repeat-y, repeat-y;
    }
}