/* ============================================================
   Golf Events – Frontend Styles (German Rainbow Golfers brand)
   - Übernimmt Brand-Tokens (Sora/DM Sans, Creme/Tinte, Rainbow)
   - Lokale Fallbacks, falls Theme die Variablen nicht setzt
   - Tastaturbedienbar, sichtbarer Fokusrahmen
   - prefers-reduced-motion respektiert
============================================================ */

.golf-events {
    /* Brand-Tokens mit Fallback (greifen wenn Theme-CSS sie nicht definiert) */
    --grg-red:        #D7263D;
    --grg-orange:     #E07A1F;
    --grg-yellow:     #F2C94C;
    --grg-green:      #1F8A5B;
    --grg-green-ink:  #166B47;
    --grg-blue:       #1D4FB0;
    --grg-blue-ink:   #16387D;
    --grg-purple:     #6D28D9;
    --grg-purple-ink: #4C1D95;
    --grg-ink:        #0E0E12;
    --grg-ink-2:      #2A2A33;
    --grg-ink-3:      #5B5B66;
    --grg-cream:      #F8F5EE;
    --grg-cream-2:    #EFEBE0;
    --grg-paper:      #FFFFFF;
    --grg-rule:       #E6E3DA;
    --grg-rule-2:     #D9D6CC;

    /* Lokale Komponenten-Tokens */
    --golf-bg:        var(--grg-paper, #fff);
    --golf-surface:   var(--grg-cream-2, #EFEBE0);
    --golf-text:      var(--grg-ink, #0E0E12);
    --golf-text-2:    var(--grg-ink-2, #2A2A33);
    --golf-muted:     var(--grg-ink-3, #5B5B66);
    --golf-rule:      var(--grg-rule, #E6E3DA);
    --golf-rule-2:    var(--grg-rule-2, #D9D6CC);
    --golf-accent:    var(--grg-green, #1F8A5B);
    --golf-accent-2:  var(--grg-green-ink, #166B47);
    --golf-cta:       var(--grg-purple, #6D28D9);
    --golf-cta-hover: var(--grg-purple-ink, #4C1D95);
    --golf-focus:     var(--grg-blue, #1D4FB0);

    --golf-radius:    20px;
    --golf-radius-sm: 14px;
    --golf-radius-pill: 999px;

    --golf-font-display: var(--font-display, "Sora", system-ui, sans-serif);
    --golf-font-body:    var(--font-body, "DM Sans", system-ui, sans-serif);

    --golf-shadow-1: 0 1px 2px rgba(14,14,18,0.05), 0 1px 1px rgba(14,14,18,0.04);
    --golf-shadow-2: 0 4px 14px rgba(14,14,18,0.06), 0 2px 4px rgba(14,14,18,0.04);
    --golf-shadow-3: 0 18px 40px rgba(14,14,18,0.10), 0 4px 10px rgba(14,14,18,0.05);

    --golf-dur-2: 200ms;
    --golf-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    color: var(--golf-text);
    font-family: var(--golf-font-body);
    margin: 0 0 2.5rem;
}

/* Screen-reader only Klasse (Fallback) */
.golf-events .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ============================================================
   Rainbow Rule (Marken-Element) – oberhalb des Grids
============================================================ */
.golf-events__rule {
    height: 6px;
    width: 64px;
    border-radius: var(--golf-radius-pill);
    margin: 0 0 1.25rem;
    background: linear-gradient(90deg,
        var(--grg-red), var(--grg-orange), var(--grg-yellow),
        var(--grg-green), var(--grg-blue), var(--grg-purple));
}

/* ============================================================
   Filter (Pills im Brand-Stil)
============================================================ */
.golf-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.75rem;
}

.golf-filter__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    background: var(--golf-surface);
    color: var(--golf-text-2);
    border: 1.5px solid transparent;
    border-radius: var(--golf-radius-pill);
    font-family: var(--golf-font-display);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--golf-dur-2) var(--golf-ease-out),
        color var(--golf-dur-2) var(--golf-ease-out),
        border-color var(--golf-dur-2) var(--golf-ease-out),
        transform 120ms var(--golf-ease-out);
}

.golf-filter__btn:hover {
    background: var(--grg-cream, #F8F5EE);
    border-color: var(--golf-rule-2);
}

.golf-filter__btn.is-active,
.golf-filter__btn[aria-pressed="true"] {
    background: var(--golf-text);
    color: #fff;
    border-color: var(--golf-text);
}

.golf-filter__btn:active { transform: scale(.97); }

.golf-filter__btn:focus-visible {
    outline: 3px solid var(--golf-focus);
    outline-offset: 2px;
}

/* ============================================================
   Status-Region (Live-Region für Screenreader)
============================================================ */
.golf-events__status {
    font-family: var(--golf-font-display);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--golf-muted);
    margin: 0 0 1rem;
}

/* ============================================================
   Grid
============================================================ */
#page-container .golf-grid {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.golf-grid__item { 
    display: block !important;
    margin: 0; 
    list-style: none !important;
}

.golf-grid__item::marker {
    content: "" !important;
    font-size: 0 !important;
}


/* ============================================================
   Card
============================================================ */
.golf-card {
    position: relative;
    background: var(--golf-bg);
    border: 1px solid var(--golf-rule);
    border-radius: var(--golf-radius);
    overflow: hidden;
    box-shadow: var(--golf-shadow-1);
    transition: transform var(--golf-dur-2) var(--golf-ease-out),
                box-shadow var(--golf-dur-2) var(--golf-ease-out);
    height: 100%;
}

.golf-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.golf-card__link:focus { outline: none; }

.golf-card__link:focus-visible {
    outline: 3px solid var(--golf-focus);
    outline-offset: 3px;
    border-radius: var(--golf-radius);
}

.golf-card:hover,
.golf-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--golf-shadow-3);
}

/* Marker-Strich am oberen Rand (Brand-Detail, je Kategorie eingefärbt) */
.golf-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--golf-accent);
    z-index: 2;
}
.golf-card[data-format="turnier"]::before    { background: var(--grg-red); }
.golf-card[data-format="reise"]::before      { background: var(--grg-blue); }
.golf-card[data-format="monatsrunde"]::before{ background: var(--grg-green); }

/* ---------- Media ---------- */
.golf-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--golf-surface);
}

.golf-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--golf-ease-out);
}

.golf-card__link:hover .golf-card__image,
.golf-card__link:focus-visible .golf-card__image {
    transform: scale(1.04);
}

.golf-card__image--placeholder {
    background:
        linear-gradient(135deg, rgba(31,138,91,.18), rgba(109,40,217,.18)),
        var(--golf-surface);
}

/* Pill-Badge im Brand-Stil */
.golf-card__badge {
    position: absolute;
    top: .85rem;
    left: .85rem;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--golf-text);
    border-radius: var(--golf-radius-pill);
    font-family: var(--golf-font-display);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 3;
}

.golf-card[data-format="turnier"]    .golf-card__badge { color: var(--grg-red); }
.golf-card[data-format="reise"]      .golf-card__badge { color: var(--grg-blue-ink); }
.golf-card[data-format="monatsrunde"] .golf-card__badge { color: var(--golf-accent-2); }

/* ---------- Body ---------- */
.golf-card__body {
    padding: 1.25rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex: 1;
}

.golf-card__title {
    font-family: var(--golf-font-display);
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--golf-text);
    text-wrap: balance;
}

.golf-card__meta {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: var(--golf-muted);
    font-size: .92rem;
}

.golf-card__meta-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.golf-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: var(--golf-accent);
}

.golf-card__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.golf-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--golf-cta);
    font-family: var(--golf-font-display);
    font-weight: 600;
    font-size: .95rem;
    transition: color var(--golf-dur-2) var(--golf-ease-out),
                gap var(--golf-dur-2) var(--golf-ease-out);
}

.golf-card__link:hover .golf-card__cta {
    color: var(--golf-cta-hover);
    gap: .6rem;
}

/* ============================================================
   Section Heading (z. B. „Vergangene Events")
============================================================ */
.golf-events__section-heading {
    font-family: var(--golf-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--golf-text);
    margin: 2.5rem 0 1.25rem;
    letter-spacing: -0.01em;
}

/* ============================================================
   Empty State
============================================================ */
.golf-events__empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--golf-muted);
    background: var(--golf-surface);
    border-radius: var(--golf-radius);
    font-family: var(--golf-font-body);
}

.golf-grid__item[hidden],
[hidden] { display: none !important; }

/* ============================================================
   Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .golf-card,
    .golf-card__image,
    .golf-card__cta,
    .golf-filter__btn,
    .golf-signup-btn {
        transition: none !important;
    }
    .golf-card:hover,
    .golf-card:focus-within { transform: none; }
    .golf-card__link:hover .golf-card__image,
    .golf-card__link:focus-visible .golf-card__image { transform: none; }
    .golf-signup-btn:hover { transform: none; }
}

/* ============================================================
   Mobile
============================================================ */
@media (max-width: 480px) {
    .golf-grid { grid-template-columns: 1fr; }
    .golf-card__body { padding: 1rem 1.1rem 1.2rem; }

    .golf-single-contact__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .golf-single-contact__info {
        align-items: center;
    }
}

/* ============================================================
   Single Event – Ansprechpartner
============================================================ */
.golf-single-contact {
    margin: 2.5rem 0;
}

.golf-single-contact__heading {
    font-family: var(--golf-font-display, "Sora", system-ui, sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--grg-ink, #0E0E12);
}

.golf-single-contact__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--grg-cream-2, #EFEBE0);
    border-radius: var(--golf-radius, 20px);
}

.golf-single-contact__photo {
    width: 144px;
    height: 144px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
}

.golf-single-contact__photo--placeholder {
    background: linear-gradient(135deg, rgba(31,138,91,.18), rgba(109,40,217,.18)), var(--grg-cream, #F8F5EE);
}

.golf-single-contact__info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.golf-single-contact__name {
    margin: 0;
    font-family: var(--golf-font-display, "Sora", system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grg-ink, #0E0E12);
}

.golf-single-contact__email {
    color: var(--grg-purple, #6D28D9);
    font-size: .95rem;
    text-decoration: none;
}

.golf-single-contact__email:hover {
    text-decoration: underline;
    color: var(--grg-purple-ink, #4C1D95);
}

/* ============================================================
   Highlight: German Rainbow Open
============================================================ */
.golf-card[data-slug*="german-rainbow-open"] {
    background: #f6a1f0;
}

.golf-card[data-slug*="german-rainbow-open"] .golf-card__meta {
    color: var(--golf-text);
}

/* ============================================================
   Einzel-Shortcode: [golf_signup_button]
============================================================ */
.golf-signup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    flex-shrink: 0;
    gap: .6rem;
    padding: 8px 20px;
    background: var(--golf-cta, #6D28D9);
    color: #fff;
    border: 2px solid var(--golf-cta, #6D28D9);
    border-radius: var(--golf-radius-pill, 999px);
    box-shadow: 0 12px 18px -6px rgba(109, 40, 217, .7);
    font-family: var(--golf-font-display, "Sora", system-ui, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color 300ms ease,
                border-color 300ms ease,
                color 300ms ease,
                box-shadow 300ms ease,
                transform 300ms ease;
}

.golf-signup-btn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.golf-signup-btn__arrow svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.golf-signup-btn:hover {
    background: #fff;
    color: var(--golf-cta, #6D28D9);
    border-color: var(--golf-cta, #6D28D9);
    box-shadow: 0 12px 28px -6px rgba(109, 40, 217, .4);
    transform: translateY(-3px);
}

.golf-signup-btn:active { transform: scale(.97); }

.golf-signup-btn:focus-visible {
    outline: 3px solid var(--golf-focus, #1D4FB0);
    outline-offset: 2px;
}

/* ============================================================
   Einzel-Shortcode: [golf_contact_photo]
============================================================ */
.golf-contact-photo-wrap {
    margin-top: 2rem;
}

.golf-contact-photo {
    border-radius: 5px;
    display: block;
}