/* TopFests site styles. Bootstrap is loaded before this file. */

:root {
    --tf-brand: #4338ca;
    --tf-brand-dark: #3730a3;
    --bs-primary: #4338ca;
    --bs-primary-rgb: 67, 56, 202;
    --bs-link-color-rgb: 67, 56, 202;
    --bs-link-hover-color-rgb: 55, 48, 163;
}

.btn-primary {
    --bs-btn-bg: #4338ca;
    --bs-btn-border-color: #4338ca;
    --bs-btn-hover-bg: #3730a3;
    --bs-btn-hover-border-color: #3730a3;
    --bs-btn-active-bg: #312e81;
    --bs-btn-active-border-color: #312e81;
    --bs-btn-disabled-bg: #4338ca;
    --bs-btn-disabled-border-color: #4338ca;
    --bs-btn-focus-shadow-rgb: 67, 56, 202;
}

.btn-outline-primary {
    --bs-btn-color: #4338ca;
    --bs-btn-border-color: #4338ca;
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
    --bs-btn-focus-shadow-rgb: 67, 56, 202;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tf-brand);
}

/* ---- Home hero ---- */
.hero {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 55%, #7c3aed 100%);
}

/* ---- Date block (used inside event cards) ---- */
.date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}
.date-badge__month { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
.date-badge__day   { font-size: 1.85rem; font-weight: 800; }
.date-badge__note  { font-size: 0.75rem; opacity: 0.9; }

/* ---- Event card: ONE markup, two layouts ---- */
.event-card {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-areas:
        "date photo"
        "date body";
    height: 100%;
    overflow: hidden;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

.event-card__date {
    grid-area: date;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 0.25rem;
    background: var(--tf-brand);
    color: #fff;
}

.event-card__photo {
    grid-area: photo;
    position: relative;
    display: block;
    aspect-ratio: 1200 / 630;
    background: var(--bs-secondary-bg);
}
.event-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1.25rem;
}
.event-card__body .btn { align-self: flex-start; margin-top: auto; }

/* List layout on wider screens: date | photo | text */
@media (min-width: 768px) {
    .event-card {
        grid-template-columns: 5.5rem 17rem 1fr;
        grid-template-areas: "date photo body";
    }
    .event-card__photo {
        aspect-ratio: auto;
        min-height: 11rem;
    }
}

/* Tile layout (grids): photo on top, date badge over the photo. Must stay after the list rules. */
.event-card--tile {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-areas:
        "photo"
        "body";
}
.event-card--tile .event-card__photo { aspect-ratio: 1200 / 630; min-height: 0; }
.event-card--tile .event-card__date {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1;
    width: 4.25rem;
    padding: 0.6rem 0.25rem;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}

/* ---- Location links (states / cities) ---- */
.location-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    text-decoration: none;
    background: var(--bs-body-bg);
}
.location-link:hover { border-color: var(--tf-brand); box-shadow: var(--bs-box-shadow-sm); }

/* ---- Single event page ---- */
.event-hero {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--bs-border-radius-lg);
}
.detail-box {
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
}
.detail-box dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); }
.detail-box dd { margin-bottom: 1rem; }