/* ==========================================================================
   Arab Events — Frontend Styles
   ========================================================================== */

.ave-fe-wrapper,
.ave-fe-featured {
    --ave-purple:      #161151;
    --ave-accent:      #dc40cf;
    --ave-gradient:    linear-gradient(135deg, #161151 0%, #5828e0 50%, #dc40cf 100%);
    --ave-text:        #161151;
    --ave-muted:       #6b7280;
    --ave-border:      #e5e7eb;
    --ave-card-bg:     #ffffff;
    --ave-card-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
    --ave-radius:      10px;
    font-family: inherit;
    color: var(--ave-text);
    line-height: 1.6;
}

.ave-fe-empty { color: var(--ave-muted); font-style: italic; padding: 24px 0; }

/* Month section */
.ave-fe-month { margin-bottom: 48px; }
.ave-fe-month-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ave-fe-month-title {
    font-size: 1.25rem !important; font-weight: 800 !important; color: var(--ave-text) !important;
    letter-spacing: .04em; text-transform: uppercase; margin: 0 !important;
    white-space: nowrap; line-height: 1.2 !important;
}
.ave-fe-month-divider { flex: 1; height: 2px; background: var(--ave-border); border-radius: 2px; }

/* Event list */
.ave-fe-events { display: flex; flex-direction: column; gap: 14px; }

/* Event card */
.ave-fe-card {
    background: var(--ave-card-bg);
    border-radius: var(--ave-radius);
    box-shadow: var(--ave-card-shadow);
    border: 1px solid var(--ave-border);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    position: relative;
}
.ave-fe-card.ave-fe-card--linked { cursor: pointer; }
.ave-fe-card.ave-fe-card--linked:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 12px 32px rgba(22,17,81,.1);
    transform: translateY(-2px);
}
.ave-fe-card::before { content: ''; display: block; height: 3px; background: transparent; transition: background .2s; }
.ave-fe-card.ave-fe-card--linked:hover::before { background: var(--ave-gradient); }
.ave-fe-card--geannuleerd::before { background: #ef4444; }
.ave-fe-card--verzet::before      { background: #f59e0b; }
.ave-fe-card--uitverkocht::before { background: #10b981; }
.ave-fe-card--nieuw::before       { background: var(--ave-gradient); }

.ave-fe-card-body { padding: 20px 22px 18px; }
.ave-fe-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ave-fe-title {
    font-size: 1.25rem !important; font-weight: 700 !important; color: var(--ave-text) !important;
    margin: 0 !important; line-height: 1.3 !important;
}
.ave-fe-card--geannuleerd .ave-fe-title { text-decoration: line-through; color: var(--ave-muted) !important; }

/* Labels */
.ave-fe-label {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
}
.ave-fe-label--geannuleerd { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ave-fe-label--verzet      { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.ave-fe-label--uitverkocht { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ave-fe-label--nieuw       { background: #f5f0ff; color: var(--ave-purple); border: 1px solid #ddd6fe; }

/* Meta */
.ave-fe-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ave-fe-meta-item { display: flex; align-items: center; gap: 9px; font-size: 1rem; color: var(--ave-muted); line-height: 1.4; }
.ave-fe-icon { flex-shrink: 0; width: 15px; height: 15px; stroke: var(--ave-purple); opacity: .7; }
.ave-fe-link {
    color: var(--ave-purple) !important; font-weight: 600; text-decoration: none;
    border-bottom: 1.5px solid transparent; transition: border-color .15s, color .15s;
}
.ave-fe-link:hover { color: var(--ave-accent) !important; border-bottom-color: var(--ave-accent); }

/* Image */
.ave-fe-img-wrap { padding: 0 22px 18px; }
.ave-fe-img { display: block; max-width: 600px; width: 100%; height: auto; border-radius: 6px; object-fit: cover; }

/* ==========================================================================
   Featured events grid  [arab_featured_events]
   ========================================================================== */
.ave-fe-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 40px;
}
@media (max-width: 900px) { .ave-fe-featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ave-fe-featured { grid-template-columns: 1fr; } }

.ave-fe-feat-card {
    background: var(--ave-card-bg);
    border-radius: var(--ave-radius);
    box-shadow: var(--ave-card-shadow);
    border: 1px solid var(--ave-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.ave-fe-feat-card.ave-fe-card--linked { cursor: pointer; }
.ave-fe-feat-card.ave-fe-card--linked:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,.1), 0 16px 40px rgba(22,17,81,.12);
    transform: translateY(-3px);
}

.ave-fe-feat-img-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f4f6; }
.ave-fe-feat-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ave-fe-feat-card:hover .ave-fe-feat-img { transform: scale(1.04); }
.ave-fe-feat-label { position: absolute; top: 10px; right: 10px; }

.ave-fe-feat-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ave-fe-feat-title {
    font-size: 1.15rem !important; font-weight: 700 !important; color: var(--ave-text) !important;
    margin: 0 0 10px !important; line-height: 1.3 !important;
}
.ave-fe-feat-meta { margin-bottom: 16px !important; flex: 1; }

.ave-fe-feat-btn {
    display: inline-block; padding: 9px 18px;
    background: var(--ave-gradient);
    color: #fff !important; font-weight: 700; font-size: .875rem; border-radius: 6px;
    text-decoration: none !important; transition: opacity .15s, transform .15s;
    align-self: flex-start; box-shadow: 0 2px 8px rgba(88,40,224,.25);
    position: relative; z-index: 2;
}
.ave-fe-feat-btn:hover { opacity: .9; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 600px) {
    .ave-fe-card-body { padding: 16px 16px 14px; }
    .ave-fe-img-wrap  { padding: 0 16px 14px; }
    .ave-fe-title     { font-size: 1rem !important; }
    .ave-fe-month-title { font-size: 1.05rem !important; }
    .ave-fe-meta-item { font-size: .85rem; }
    .ave-fe-card:hover { transform: none; }
}
@media (min-width: 900px) {
    .ave-fe-card-body { padding: 22px 26px 20px; }
}

/* Optional internal event detail links; preserve existing card appearance. */
.ave-fe-wrapper .ave-internal-event-link,.ave-fe-featured .ave-internal-event-link{color:inherit;text-decoration:none}.ave-fe-wrapper .ave-internal-event-link:hover,.ave-fe-featured .ave-internal-event-link:hover{text-decoration:underline}

/* ==========================================================================
   ArabEvents 2.1 beta 3 — single-column event calendar with date tiles
   All event photos are auto-cropped in CSS; media originals are untouched.
   ========================================================================== */

/* Regular agenda: max 900px, centred on the featured section (or viewport).
   layout.js corrects offsets from WordPress block containers. */
@media (min-width: 1000px) {
    .ave-fe-wrapper--list {
        width: min(calc(100vw - 48px), 900px);
        max-width: none !important;
        position: relative;
        left: 50%;
        transform: translateX(calc(-50% + var(--ave-agenda-center-offset, 0px)));
    }
}
.ave-fe-wrapper--list .ave-fe-month { margin-bottom: 40px; }
.ave-fe-wrapper--list .ave-fe-month-header { margin-bottom: 16px; }
.ave-fe-wrapper--list .ave-fe-events {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.ave-fe-wrapper--list .ave-fe-card {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 126px;
    padding: 18px 24px;
    min-width: 0;
}
.ave-fe-wrapper--list .ave-fe-card--has-image {
    grid-template-columns: 82px minmax(0, 1fr) clamp(200px, 23%, 280px);
    min-height: 170px;
}
/* Expand the date tile only for multi-day events; never add a second tile. */
.ave-fe-wrapper--list .ave-fe-card--date-range:not(.ave-fe-card--has-image) {
    grid-template-columns: 110px minmax(0, 1fr);
}
.ave-fe-wrapper--list .ave-fe-card--date-range.ave-fe-card--has-image {
    grid-template-columns: 110px minmax(0, 1fr) clamp(200px, 23%, 280px);
}
.ave-fe-wrapper--list .ave-fe-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    width: auto;
}
.ave-fe-wrapper--list .ave-fe-date {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    background: #f4f0ff;
    border: 1px solid #e9e2fb;
    border-radius: 10px;
    min-height: 94px;
    width: 82px;
    box-sizing: border-box;
    text-align: center;
    color: #332171;
}
.ave-fe-wrapper--list .ave-fe-date time { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.12; text-decoration: none; }
.ave-fe-wrapper--list .ave-fe-date-day { font-size: .76rem; font-weight: 800; letter-spacing: .09em; }
.ave-fe-wrapper--list .ave-fe-date-number { font-size: 2.25rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.ave-fe-wrapper--list .ave-fe-date-month { font-size: .72rem; font-weight: 700; letter-spacing: .07em; }
.ave-fe-wrapper--list .ave-fe-date--range { width: 110px; }
.ave-fe-wrapper--list .ave-fe-date--range .ave-fe-date-day { font-size: .68rem; }
.ave-fe-wrapper--list .ave-fe-date--range .ave-fe-date-number { font-size: 1.73rem; letter-spacing: -.055em; white-space: nowrap; }
.ave-fe-wrapper--list .ave-fe-date--cross-month time { gap: 5px; }
.ave-fe-wrapper--list .ave-fe-date-range-line { display: block; font-size: 1.08rem; font-weight: 800; white-space: nowrap; line-height: 1.15; letter-spacing: -.02em; }
.ave-fe-wrapper--list .ave-fe-card-body {
    min-width: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}
.ave-fe-wrapper--list .ave-fe-card-top { justify-content: flex-start; gap: 10px; margin-bottom: 10px; }
.ave-fe-wrapper--list .ave-fe-title {
    margin: 0 !important;
    font-size: 1.23rem !important;
    line-height: 1.28 !important;
    font-weight: 750 !important;
    overflow-wrap: anywhere;
}
.ave-fe-wrapper--list .ave-fe-meta { gap: 6px; }
.ave-fe-wrapper--list .ave-fe-meta-item { font-size: .94rem; line-height: 1.4; }
.ave-fe-wrapper--list .ave-fe-icon { height: 16px; width: 16px; }
.ave-fe-wrapper--list .ave-fe-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
    margin-top: 12px;
    font-size: .91rem;
    line-height: 1.45;
}
.ave-fe-wrapper--list .ave-fe-view { color: var(--ave-accent); font-weight: 700; }
.ave-fe-wrapper--list .ave-fe-direct { position: relative; z-index: 3; }
.ave-fe-wrapper--list .ave-fe-img-wrap {
    display: flex;
    align-items: center;
    align-self: center;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.ave-fe-wrapper--list .ave-fe-img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px;
}
/* Overlay and ticket buttons are separate interactive elements, not nested links. */
.ave-fe-card, .ave-fe-feat-card { position: relative; }
.ave-fe-hit-area {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
}
.ave-fe-hit-area:focus-visible {
    outline: 3px solid var(--ave-accent, #dc40cf);
    outline-offset: -4px;
}
.ave-fe-feat-card .ave-fe-feat-btn { position: relative; z-index: 3; }
.ave-fe-feat-card .ave-fe-feat-view {
    margin-top: auto;
    font-weight: 700;
    color: var(--ave-accent);
}
/* Responsive: maintain the date marker; avoid excessively narrow image/text. */
@media (max-width: 999px) {
    .ave-fe-wrapper--list .ave-fe-card { gap: 18px; padding: 17px 19px; }
    .ave-fe-wrapper--list .ave-fe-card--has-image { grid-template-columns: 74px minmax(0, 1fr) minmax(145px, 28%); }
    .ave-fe-wrapper--list .ave-fe-date { width: 74px; min-height: 88px; }
    .ave-fe-wrapper--list .ave-fe-card--date-range:not(.ave-fe-card--has-image) {
        grid-template-columns: 100px minmax(0, 1fr);
    }
    .ave-fe-wrapper--list .ave-fe-card--date-range.ave-fe-card--has-image {
        grid-template-columns: 100px minmax(0, 1fr) minmax(145px, 28%);
    }
    .ave-fe-wrapper--list .ave-fe-date--range { width: 100px; }
    .ave-fe-wrapper--list .ave-fe-title { font-size: 1.12rem !important; }
}
@media (max-width: 620px) {
    .ave-fe-wrapper--list .ave-fe-month { margin-bottom: 32px; }
    .ave-fe-wrapper--list .ave-fe-month-header { gap: 10px; margin-bottom: 14px; }
    .ave-fe-wrapper--list .ave-fe-month-title { font-size: 1rem !important; }
    .ave-fe-wrapper--list .ave-fe-card,
    .ave-fe-wrapper--list .ave-fe-card--has-image {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 11px 14px;
        min-height: 0;
        padding: 14px;
    }
    .ave-fe-wrapper--list .ave-fe-date { width: 62px; min-height: 77px; align-self: start; border-radius: 8px; }
    .ave-fe-wrapper--list .ave-fe-date-day { font-size: .68rem; }
    .ave-fe-wrapper--list .ave-fe-date-number { font-size: 1.9rem; }
    .ave-fe-wrapper--list .ave-fe-date-month { font-size: .65rem; }
    .ave-fe-wrapper--list .ave-fe-card--date-range:not(.ave-fe-card--has-image),
    .ave-fe-wrapper--list .ave-fe-card--date-range.ave-fe-card--has-image {
        grid-template-columns: 82px minmax(0, 1fr);
    }
    .ave-fe-wrapper--list .ave-fe-date--range { width: 82px; min-height: 77px; }
    .ave-fe-wrapper--list .ave-fe-date--range .ave-fe-date-day { font-size: .6rem; }
    .ave-fe-wrapper--list .ave-fe-date--range .ave-fe-date-number { font-size: 1.42rem; }
    .ave-fe-wrapper--list .ave-fe-date-range-line { font-size: .82rem; }
    .ave-fe-wrapper--list .ave-fe-card-body { align-self: center; }
    .ave-fe-wrapper--list .ave-fe-card-top { margin-bottom: 6px; }
    .ave-fe-wrapper--list .ave-fe-title { font-size: 1.04rem !important; }
    .ave-fe-wrapper--list .ave-fe-meta { gap: 5px; }
    .ave-fe-wrapper--list .ave-fe-meta-item { font-size: .86rem; }
    .ave-fe-wrapper--list .ave-fe-actions { margin-top: 9px; gap: 3px 14px; font-size: .85rem; }
    .ave-fe-wrapper--list .ave-fe-img-wrap {
        grid-column: 1 / -1;
        align-self: stretch;
        width: 100%;
    }
    .ave-fe-wrapper--list .ave-fe-img {
        aspect-ratio: 16 / 9;
        max-height: none;
        width: 100%;
    }
    .ave-fe-wrapper--list .ave-fe-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ave-fe-wrapper--list .ave-fe-card { transition: none; }
}

/* ArabEvents 2.1 beta 7: city calendars and city-page navigation. */
.ave-fe-wrapper--city {
    width: 100%; max-width: 900px !important; margin-left: auto; margin-right: auto;
    position: static !important; left: auto !important; transform: none !important;
}
.ave-fe-city-empty {
    max-width: 900px; margin: 12px auto 40px; padding: 22px 26px;
    border: 1px solid #e9e2fb; background: #faf9ff; border-radius: 10px;
    color: #161151;
}
.ave-fe-city-empty p { margin: 0 0 8px; }
.ave-fe-city-empty p:last-child { margin: 0; }
.ave-fe-city-empty a { color: #a626cb; text-decoration: underline; }
.ave-city-links {
    display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
    max-width: 900px; margin: 20px auto 28px; color: #161151;
    font-size: .92rem;
}
.ave-city-links__title { font-weight: 700; }
.ave-city-links a {
    display: inline-block; padding: 6px 12px; text-decoration: none;
    border-radius: 8px; background: #f4f0ff; color: #332171;
    font-weight: 650; border: 1px solid #e9e2fb;
}
.ave-city-links a:hover, .ave-city-links a:focus-visible {
    background: #e9d9fa; color: #161151;
}
.ave-city-links a[aria-current="page"] {
    background: #332171; border-color: #332171; color: #fff;
}
@media (max-width: 620px) {
    .ave-fe-city-empty { padding: 16px 18px; }
    .ave-city-links { gap: 7px; }
}

/* ArabEvents 2.1 beta 10: city-page layout, without overriding Blocksy typography
   or Gutenberg text alignment. Only width/spacing are managed here.
   The page title is a normal WordPress page title and should be styled via
   Blocksy. The introduction is an editable Gutenberg paragraph. */
body.ave-city-page .entry-header {
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: 24px;
    /* Centred by default; Blocksy's own heading alignment may override it. */
    text-align: center;
}
body.ave-city-page .ave-city-intro {
    max-width: 650px;
    margin: 0 auto 44px;
}
/* Old non-Gutenberg city pages keep the original centred introduction.
   Gutenberg blocks with has-text-align-* now control their own alignment. */
body.ave-city-page .ave-city-intro:not(.has-text-align-left):not(.has-text-align-center):not(.has-text-align-right):not(.has-text-align-justify) {
    text-align: center;
}
.ave-city-back {
    max-width: 900px;
    margin: 30px auto 55px;
    text-align: center;
    font-size: 0.95rem;
}
.ave-city-back a {
    color: var(--ave-accent, #d72fc4);
    font-weight: 700;
    text-decoration: none;
}
.ave-city-back a:hover,
.ave-city-back a:focus-visible { text-decoration: underline; }
@media (max-width: 620px) {
    body.ave-city-page .entry-header { margin-bottom: 18px; }
    body.ave-city-page .ave-city-intro { margin-bottom: 30px; }
    .ave-city-back { margin: 24px auto 36px; font-size: .9rem; }
}


/* ArabEvents 2.1 beta 9: city page layout on phones.
   Only apply to the _ave_city pages, leaving the national homepage alone. */
@media (max-width: 767px) {
    /* Gutenberg/Blocksy content can extend to the screen edge on city pages.
       Pad the calendar itself so month dividers and cards share a safe gutter. */
    body.ave-city-page .ave-fe-wrapper--city {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 20px;
        margin-inline: auto !important;
    }
    body.ave-city-page .ave-fe-city-empty,
    body.ave-city-page .ave-city-back {
        box-sizing: border-box;
        width: calc(100% - 40px);
        max-width: 900px;
        margin-inline: auto;
    }
    /* Page-title font size and line-height come from Blocksy. Only give
       its header a safe gutter and tighten the separation from the intro. */
    body.ave-city-page .entry-header {
        box-sizing: border-box;
        padding-inline: 20px;
        padding-bottom: 0;
        margin-bottom: 16px;
    }
    body.ave-city-page .entry-content {
        margin-top: 0;
    }
    body.ave-city-page .ave-city-intro {
        margin-top: 0;
        margin-bottom: 26px;
    }
}

/* ArabEvents 2.1 beta 11: close the mobile gap between Blocksy's page title
   and the first editable Gutenberg paragraph. Scope this to city landing pages
   only, and only if that introduction is the first content block. The negative
   top margin counteracts theme-provided title/content separation without
   fixing the H1 typography or overriding paragraph alignment. */
@media (max-width: 767px) {
    body.ave-city-page .entry-content > .ave-city-intro:first-child {
        margin-block-start: -28px !important;
    }
}