/* =====================================================
   Homepage events calendar (hero, right side)
   Colors follow Catcetera's Instagram event posters:
   one rainbow pastel per weekday column.
   ===================================================== */

:root {
    --dow0: #c9b8f7;  /* Sun  lavender */
    --dow1: #b3c7f7;  /* Mon  periwinkle */
    --dow2: #f7b3dc;  /* Tue  pink */
    --dow3: #fba99e;  /* Wed  coral */
    --dow4: #fdc690;  /* Thu  orange */
    --dow5: #fde58f;  /* Fri  yellow */
    --dow6: #cdef9e;  /* Sat  lime */
    --ecal-ink: #2a2a2a;
}

/* ---- Hero layout: welcome text on the cat pattern, calendar card below ---- */
.page-home .hero.hero-split {
    display: block;
    min-height: 0;
    text-align: center;
}
.hero-split-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
/* No card behind the intro: dark, heavy text plus a soft light halo keeps it
   readable directly on the cat pattern */
.hero-intro h1 {
    font-size: 3.6rem;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    color: #1a1a1a;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.9);
}
.hero-intro .hero-tagline {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
    color: #222;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.95);
}
.hero-intro .btn-primary {
    background: #a855c8;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
}
.hero-intro .btn-primary:hover { background: #9333b0; }
.hero-hours-note {
    margin: 1.5rem auto 0;
    max-width: 30rem;
    font-size: 1rem;
    font-weight: 500;
    color: #222;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.95);
}

/* ---- Calendar card ---- */
.ecal {
    position: relative;
    background: #fff;
    border: 3px solid var(--ecal-ink);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--ecal-ink);
    padding: 0.9rem 0.9rem 1rem;
    text-align: left;   /* the hero is centered; day numbers sit top-left as before */
}
.ecal-peek {
    position: absolute;
    top: -34px;
    left: 22px;
    width: 64px;
    pointer-events: none;
}
/* Both months occupy the same grid cell, so the card is always as tall as the taller
   month and switching months never moves the rest of the page. The inactive month keeps
   its space but is invisible (and hidden from screen readers via visibility). */
.ecal-months { display: grid; }
.ecal-month {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
}
.ecal-month[hidden] { display: flex; visibility: hidden; }

/* Arrows pinned to fixed spots on either side, so a longer month name doesn't shift them */
.ecal-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    width: 100%;
    margin: 0 auto 0.6rem;
}
.ecal-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
/* Rainbow letters with a dark outline, like the posters */
.ecal-title span[class^="rb"] {
    -webkit-text-stroke: 1.5px var(--ecal-ink);
    paint-order: stroke fill;
}
.rb0 { color: #c084fc; } .rb1 { color: #f472b6; } .rb2 { color: #fb7185; }
.rb3 { color: #fb923c; } .rb4 { color: #facc15; } .rb5 { color: #4ade80; }
.rb6 { color: #60a5fa; }
.ecal-title-sub { color: var(--ecal-ink); }

.ecal-nav {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ecal-ink);
    background: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ecal-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}
.ecal-nav:hover:not(:disabled) { background: var(--accent-light); }
.ecal-nav:disabled { opacity: 0.25; cursor: default; }

/* ---- Grid ---- */
.ecal-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto;      /* weekday letters */
    grid-auto-rows: 1fr;           /* every week the same height, stretched to fill the card */
    gap: 4px;
}
.ecal-dow {
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
    padding: 2px 0;
    border-radius: 6px;
    border: 2px solid var(--ecal-ink);
}
.dow0 { --day: var(--dow0); } .dow1 { --day: var(--dow1); } .dow2 { --day: var(--dow2); }
.dow3 { --day: var(--dow3); } .dow4 { --day: var(--dow4); } .dow5 { --day: var(--dow5); }
.dow6 { --day: var(--dow6); }
.ecal-dow { background: var(--day); }

.ecal-day {
    position: relative;
    min-height: 84px;
    background: var(--day);
    border: 2px solid var(--ecal-ink);
    border-radius: 6px;
    padding: 3px 3px 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}
.ecal-num {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    padding: 1px 2px;
}
.ecal-day.out { background: color-mix(in srgb, var(--day) 45%, #fff); }
.ecal-day.out .ecal-num { font-size: 0.7rem; text-transform: uppercase; }
.ecal-day.past { filter: saturate(0.5); opacity: 0.72; }
.ecal-day.past:hover { opacity: 0.9; }
.ecal-day.today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #a855c8; }
.ecal-day.today .ecal-num::after {
    content: 'today';
    margin-left: 4px;
    font-size: 0.6rem;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    color: #7e22a8;
}

/* Event chip */
.ecal-ev {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1.5px solid var(--ecal-ink);
    border-left: 5px solid var(--ev);
    border-radius: 5px;
    padding: 2px 2px 3px;
    color: var(--ecal-ink);
    text-decoration: none;
    line-height: 1.1;
    transition: transform 0.12s, background 0.12s;
}
a.ecal-ev:hover, a.ecal-ev:focus-visible {
    background: #fff;
    transform: translateY(-1px) rotate(-1deg);
    outline: none;
    box-shadow: 0 2px 0 var(--ecal-ink);
}
/* A day with a single event: the whole cell is the link */
.ecal-day.single a.ecal-ev::after {
    content: '';
    position: absolute;
    inset: 0;
}
.ecal-day.single:has(a.ecal-ev) { cursor: pointer; }
.ecal-emoji { font-size: 1.15rem; line-height: 1.1; }
.ecal-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.72rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ecal-time { font-size: 0.62rem; color: #444; white-space: nowrap; }

/* Two or more events: compact chips so they fit */
.ecal-day:not(.single) .ecal-ev { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 2px; }
.ecal-day:not(.single) .ecal-emoji { font-size: 0.85rem; }
.ecal-day:not(.single) .ecal-name { -webkit-line-clamp: 1; font-size: 0.65rem; }
.ecal-day:not(.single) .ecal-time { flex-basis: 100%; }

.ecal-idle {
    margin: auto;
    font-size: 1.5rem;
    opacity: 0.28;
    filter: grayscale(0.3);
    user-select: none;
}

/* Phone list (replaces the grid on small screens) */
.ecal-list { display: none; list-style: none; margin: 0; padding: 0; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .hero-split-inner { padding: 2rem 1rem 2.5rem; }
    .hero-split-inner { gap: 2.5rem; }
    .hero-intro h1 { font-size: 2.4rem; }
    .hero-intro .hero-tagline { font-size: 1.2rem; }
    .ecal { padding: 0.75rem; box-shadow: 4px 4px 0 var(--ecal-ink); }
    .ecal-peek { width: 52px; top: -28px; }
    .ecal-title { font-size: 1.6rem; }
    .ecal-title-sub { display: block; }   /* always two lines, so every month's heading is the same height */
    .ecal-grid { display: none; }
    .ecal-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
    .ecal-list a {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        background: color-mix(in srgb, var(--day) 55%, #fff);
        border: 2px solid var(--ecal-ink);
        border-left: 7px solid var(--ev);
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--ecal-ink);
        text-decoration: none;
    }
    .ecal-list-date {
        flex: none;
        width: 2.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.7rem;
        text-transform: uppercase;
        line-height: 1.1;
    }
    .ecal-list-date b { font-family: var(--font-heading); font-size: 1.3rem; }
    .ecal-list .ecal-emoji { font-size: 1.5rem; }
    .ecal-list-text { display: flex; flex-direction: column; min-width: 0; }
    .ecal-list-text strong { font-family: var(--font-heading); font-weight: 600; }
    .ecal-list-text small { color: #444; }
    .ecal-list-empty { text-align: center; padding: 1rem 0.5rem; color: var(--text-light); }
}