/* Stay Safe + Downcast — Summer UK Tour 2026 landing pages
   Standalone lightweight stylesheet (not the full site styles.css).
   Palette matches the official tour poster (tour_poster.jpg): black torn-paper
   background with neon pink/green accents, alternating per city as on the
   poster's date list. Only what these pages need: one display font, a
   date/venue card, a unified button, and the tour-specific layout. */

@font-face {
    font-family: 'DIN Condensed';
    src: url('fonts/DINCondensed-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-color: #F4259B;
    --primary-color-light: #FF6EC0;
    --primary-rgb: 244, 37, 155;
    --text-color: #FFFFFF;
    --text-secondary: #B8B8B8;
    --background-color: #0D0D0D;
    --surface-elevated: #1C1C1C;
    --shadow-hover: 0 8px 30px rgba(var(--primary-rgb), 0.35);
    --transition: all 0.25s ease;
}

/* Birmingham, Bristol, Huddersfield use the poster's green in place of pink */
body.accent-green {
    --primary-color: #53C633;
    --primary-color-light: #8CE85C;
    --primary-rgb: 83, 198, 51;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    position: relative;
}

/* Ambient backdrop — a heavily blurred copy of the same poster crop used in
   the hero, so the crisp poster art in the page doesn't look pasted onto flat
   black. Reuses the exact same image URL as the visible hero so the browser
   serves it from cache instead of a second download. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('img/tour/hero-poster.jpg');
    background-size: cover;
    background-position: center 20%;
    filter: blur(45px) brightness(0.4) saturate(1.3);
    transform: scale(1.15);
    z-index: -1;
}

body.tour-hub::before {
    background-image: url('img/tour/hero-poster-full.jpg');
    background-position: center top;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

/* Header */

.tour-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    border-bottom: 3px solid var(--primary-color);
}

.tour-header img {
    width: 125px;
    height: 40px;
}

/* Hero — poster crop, kept at its native ratio, lifted off the blurred
   backdrop with rounded corners and a shadow so it reads as a floating card
   rather than a flat rectangle pasted on the background */

.tour-hero {
    padding: 1.5rem 1.25rem 0;
}

.tour-hero img {
    width: 100%;
    height: auto;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

/* Main content */

.tour-lp {
    max-width: 560px;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.5rem;
    text-align: center;
}

.tour-title {
    font-family: 'DIN Condensed', 'Arial Black', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 2.75rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 1.05;
}

.tour-subhead {
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-top: 0.4rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Date/venue card — same pattern as .show-item on the main site */

.tour-date-card {
    display: flex;
    align-items: center;
    background: var(--surface-elevated);
    padding: 1.25rem;
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    border-radius: 8px;
    text-align: left;
    margin-bottom: 1.75rem;
}

.tour-date-card .date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
}

.tour-date-card .day {
    font-family: 'DIN Condensed', 'Arial Black', sans-serif;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--primary-color);
}

.tour-date-card .month {
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.tour-date-card .details {
    flex-grow: 1;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(var(--primary-rgb), 0.5);
}

.tour-date-card .details h3 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.tour-date-card .details p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tour-date-card .support-note {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Show info — plain text (not a card) naming the city/date/venue for this
   page. Deliberately unstyled as a box so it doesn't compete visually with
   the one real CTA button below it. */

.tour-show-info {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.tour-show-info strong {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.tour-show-info .free-entry-tag {
    color: var(--primary-color);
    font-weight: bold;
}

.tour-show-info .support-note {
    display: inline;
    margin-top: 0;
}

/* Buttons */

.cta-button,
.tickets-button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    background: var(--primary-color);
    color: #0D0D0D;
    font-weight: 700;
    font-family: 'Arial Black', Impact, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
    width: 260px;
    max-width: 100%;
    text-align: center;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
}

.cta-button:hover,
.tickets-button:hover,
.button:hover {
    background: var(--primary-color-light);
    border-color: var(--primary-color-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.button.secondary {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.button.secondary:hover {
    background: var(--primary-color);
    color: #0D0D0D;
}

.tour-hub-link {
    margin-top: 1rem;
    font-size: 0.8rem;
}

/* Footer */

.tour-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 3px solid var(--primary-color);
}

.tour-footer .social-links a {
    display: inline-block;
    margin: 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.tour-footer .social-links a:hover {
    color: var(--primary-color);
}

.tour-footer p {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Hub page — stacked date cards, each keeping its own poster color via
   an explicit modifier class (the page itself has no single accent) */

.tour-hub-list {
    text-align: left;
    margin-top: 1.5rem;
}

.tour-hub-list .tour-date-card {
    margin-bottom: 1rem;
}

.tour-hub-list .tour-date-card.city-pink {
    --primary-color: #F4259B;
    --primary-color-light: #FF6EC0;
    --primary-rgb: 244, 37, 155;
}

.tour-hub-list .tour-date-card.city-green {
    --primary-color: #53C633;
    --primary-color-light: #8CE85C;
    --primary-rgb: 83, 198, 51;
}

.tour-hub-list .tour-date-card .actions {
    margin-left: 1rem;
}

.tour-hub-list .cta-button,
.tour-hub-list .tickets-button {
    width: auto;
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .tour-date-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .tour-date-card .details {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(var(--primary-rgb), 0.5);
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }

    .tour-hub-list .tour-date-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .tour-hub-list .tour-date-card .details {
        border-left: 1px solid rgba(var(--primary-rgb), 0.5);
        border-top: none;
        padding-left: 1rem;
        padding-top: 0;
        margin-top: 0;
    }

    .tour-hub-list .tour-date-card .actions {
        margin-left: 0.5rem;
    }

    .tour-hub-list .cta-button,
    .tour-hub-list .tickets-button {
        min-width: 0;
        padding: 0.5rem 0.9rem;
        font-size: 0.7rem;
    }
}