/*
 * Block: gep/fw-day — Single Day Schedule
 * Author: Greta Eline Poclen
 *
 * Visual output is identical to acf/fw-schedules (egloo).
 * Key differences from the original block's style.css:
 *   - No .fw-schedules wrapper (each block is already one day)
 *   - Grid updated to include the "link" area
 *   - --event-color is now set on .fw-event, not .fw-event-location
 *   - .fw-event-btn styles added (outlined pill button)
 */

/* -----------------------------------------------------------------------------
   Day header
----------------------------------------------------------------------------- */

.fw-day {
    max-width: 800px;
    margin: 0 auto 1rem;
    font-family: inherit;
}

.fw-day-title {
    text-align: center;
    color: var(--waf-sky);
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 0;
}

.fw-day-date {
    text-align: center;
    font-weight: bold;
    color: var(--day-color, var(--waf-red, #e4002b));
    font-size: 16px;
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Category heading
----------------------------------------------------------------------------- */

.fw-category-title {
    text-align: left;
    color: var(--waf-sky);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    /* Align with the right column of the event grid */
    padding-left: calc(50% + 1rem);
    transform: translateX(-4rem);
}

/* -----------------------------------------------------------------------------
   Events grid
----------------------------------------------------------------------------- */

.fw-events {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.fw-event {
    display: grid;
    grid-template-columns: 1fr 2rem 1fr;
    grid-template-areas:
        "time     .  title"
        "location .  description"
        ".        .  link";
    gap: 0;
    margin-bottom: 0;
    transform: translateX(-4rem);
}

.fw-events .fw-event:last-child {
    margin-bottom: 0.5rem;
}

/* Time and location — left column */

.fw-event-time {
    grid-area: time;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: var(--waf-blue);
}

.fw-event-location {
    grid-area: location;
    text-align: right;
    font-size: 12px;
    /* --event-color is set inline on .fw-event and cascades here */
    color: var(--event-color, var(--waf-red, #e4002b));
    line-height: 1;
}

/* Title and description — right column */

.fw-event-title {
    grid-area: title;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    color: var(--waf-blue);
}

.fw-event-description {
    grid-area: description;
    text-align: left;
    font-size: 12px;
    color: var(--waf-blue);
    line-height: 1.4;
}

/* Link button — right column, below description */

.fw-event-link-wrap {
    grid-area: link;
    text-align: left;
    padding-top: 0.35rem;
    padding-bottom: 0.3rem;
}

.fw-event-btn {
    display: inline-block;
    padding: 0.3rem 1.1rem;
    border: 2px solid var(--event-color, var(--waf-red, #e4002b));
    border-radius: 999px;
    color: var(--event-color, var(--waf-red, #e4002b));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fw-event-btn:hover {
    background-color: var(--event-color, var(--waf-red, #e4002b));
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Empty field handling
----------------------------------------------------------------------------- */

.fw-event-time:empty,
.fw-event-location:empty,
.fw-event-description:empty {
    display: none;
}

/*
 * When the time field is empty, move location into the time grid area
 * so it sits right-aligned in the left column without a blank gap above it.
 */
.fw-events .fw-event:has(.fw-event-time:empty) .fw-event-location {
    grid-area: time;
    text-align: right;
    align-self: end;
    line-height: 1.85;
    font-size: 12px;
    font-weight: normal;
}

.fw-events .fw-event:has(.fw-event-time:empty) .fw-event-title {
    align-self: end;
}

/* -----------------------------------------------------------------------------
   Responsive — 768px
----------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .fw-day {
        padding: 0 4rem;
    }

    .fw-category-title {
        padding-left: 0;
        text-align: left;
        margin-top: 1rem;
        transform: none;
    }

    .fw-event {
        grid-template-columns: 1fr;
        grid-template-areas:
            "time"
            "location"
            "title"
            "description"
            "link";
        row-gap: 0;
        margin-bottom: 0;
        transform: none;
    }

    .fw-event-location,
    .fw-event-description {
        line-height: 1;
        margin-bottom: 0.4rem;
    }

    .fw-event-time {
        text-align: left;
        font-size: clamp(14px, 4vw, 16px);
        color: var(--waf-red, #e4002b);
        line-height: 1.2;
        margin-top: 0.5rem;
    }

    .fw-event-location {
        text-align: left;
        font-size: clamp(12px, 3.5vw, 14px);
    }

    .fw-event-title {
        text-align: left;
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.7;
    }

    .fw-event-description {
        text-align: left;
        font-size: clamp(12px, 4vw, 14px);
    }

    .fw-event-link-wrap {
        padding-top: 0.4rem;
        padding-bottom: 0.5rem;
    }

    .fw-day-title {
        font-size: clamp(18px, 5vw, 22px);
    }

    .fw-day-date {
        font-size: clamp(14px, 4vw, 16px);
        margin-bottom: 0.5rem;
    }

    .fw-events .fw-event:last-child {
        margin-bottom: 0.5rem;
    }
}