/* ============================================================
   Aradel Financial Calendar — Full Page
   File: /wp-content/mu-plugins/aradel-financial-calendar-page.css
   Scoped entirely to .ar-fcal__* namespace.

   Card states:
     Default  — light grey (#F2F2F2), date + title visible only
     Hover    — #001014 bg, all text white, divider + actions
                slide up + fade in
   ============================================================ */

/* ── Section wrapper (owns all site padding tokens) ── */
.ar-fcal__section {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 112px;
    padding-right: 112px;
    padding-bottom: 96px;
    box-sizing: border-box;
}

/* ── Tab nav ── */
.ar-fcal__tabs {
    display: flex;
    border-bottom: 1px solid rgba(1, 48, 58, 0.15);
    margin-bottom: 48px;
}

.ar-fcal__tab {
    position: relative;
    flex: 1;
    background: none;
    border: none;
    padding: 0 0 20px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(1, 48, 58, 0.45);
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    outline: none;
    white-space: nowrap;
}

.ar-fcal__tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #01303A;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.ar-fcal__tab--active {
    color: #01303A;
}

.ar-fcal__tab--active::after {
    transform: scaleX(1);
}

.ar-fcal__tab:hover:not(.ar-fcal__tab--active) {
    color: rgba(1, 48, 58, 0.7);
}

.ar-fcal__tab:focus-visible {
    outline: 2px solid #C1000F;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Panel ── */
.ar-fcal__panel[hidden] {
    display: none;
}

/* ── Card grid — 3 columns desktop, 2 tablet, 1 mobile ── */
.ar-fcal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ════════════════════════════════════════════
   EVENT CARD
   ════════════════════════════════════════════ */

.ar-fcal__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    background: #F2F2F2;
    border-radius: 20px;
    padding: 28px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;

    /* Colour + reveal transition */
    transition:
        background-color 0.35s ease,
        opacity 0.5s ease,
        transform 0.5s ease;

    /* Scroll-reveal: starts invisible */
    opacity: 0;
    transform: translateY(24px);
}

.ar-fcal__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Past cards 60% opacity once revealed */
.ar-fcal__card--past.is-visible {
    opacity: 0.6;
}

.ar-fcal__card--past.is-visible:hover {
    opacity: 1;
}

/* ── Hover: flip background to near-black ── */
.ar-fcal__card:hover {
    background: #001014;
}

/* ════════════════════════════════════════════
   CARD META (date + time)
   ════════════════════════════════════════════ */

.ar-fcal__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(1, 48, 58, 0.65);
    line-height: 1.2;
    transition: color 0.35s ease;
}

.ar-fcal__card:hover .ar-fcal__card-meta {
    color: rgba(255, 255, 255, 0.65);
}

.ar-fcal__card-meta-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* ════════════════════════════════════════════
   CARD TITLE
   ════════════════════════════════════════════ */

.ar-fcal__card-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #01303A;
    line-height: 1.3;
    /* Push title to bottom of card in default state */
    margin: auto 0 0;
    transition: color 0.35s ease;
}

.ar-fcal__card:hover .ar-fcal__card-title {
    color: #ffffff;
}

/* ════════════════════════════════════════════
   HOVER-ONLY CONTENT
   Hidden by default; slides up + fades in on hover.
   Contains: location, divider, action buttons.
   ════════════════════════════════════════════ */

.ar-fcal__card-hover-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(16px);
    transition:
        max-height 0.4s ease,
        opacity    0.35s ease 0.05s,
        transform  0.35s ease 0.05s;
}

.ar-fcal__card:hover .ar-fcal__card-hover-content {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

/* ── Location ── */
.ar-fcal__card-location {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin: 8px 0 0;
    line-height: 1.4;
}

/* ── Divider ── */
.ar-fcal__card-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 20px 0;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════
   ACTION BUTTONS
   ════════════════════════════════════════════ */

.ar-fcal__card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ar-fcal__card-actions-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ar-fcal__card-actions-row--webcast {
    gap: 0;
}

.ar-fcal__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.ar-fcal__action svg {
    flex-shrink: 0;
    stroke: currentColor;
    width: 18px;
    height: 18px;
}

.ar-fcal__action:hover,
.ar-fcal__action:focus-visible {
    opacity: 0.7;
    text-decoration: none !important;
}

.ar-fcal__action:focus-visible {
    outline: 2px solid #C1000F;
    outline-offset: 2px;
    border-radius: 2px;
}

.ar-fcal__action--webcast {
    font-weight: 600;
}

/* ── Empty state ── */
.ar-fcal__empty {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(1, 48, 58, 0.5);
    margin: 40px 0 0;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .ar-fcal__section {
        padding-left: 64px;
        padding-right: 64px;
        padding-bottom: 72px;
    }

    .ar-fcal__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Tap-toggled state (mobile JS adds .is-tapped) ── */
.ar-fcal__card.is-tapped {
    background: #001014;
}

.ar-fcal__card.is-tapped .ar-fcal__card-meta {
    color: rgba(255, 255, 255, 0.65);
}

.ar-fcal__card.is-tapped .ar-fcal__card-title {
    color: #ffffff;
}

.ar-fcal__card.is-tapped .ar-fcal__card-hover-content {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .ar-fcal__section {
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 48px;
    }

    .ar-fcal__tabs {
        margin-bottom: 32px;
    }

    .ar-fcal__tab {
        font-size: 14px;
    }

    .ar-fcal__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ar-fcal__card {
        padding: 24px 20px;
    }

    .ar-fcal__card-actions-row {
        flex-wrap: wrap;
        gap: 16px;
    }
}