/* ═══════════════════════════════════════════════════════════════
   CLUB DETAIL
   styles-x-club.css

   Lifted verbatim out of the <style> block that was sitting in
   club-view.php. Nothing here has been rewritten in the move — the
   page renders exactly as it did; the rules are just somewhere they
   can be seen and edited.
   ═══════════════════════════════════════════════════════════════ */
body { overflow-x: clip; }
.ot-hero__bg { position:absolute; inset:-15%; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.04); transition:transform 8s ease-out; will-change:transform; }
.ot-hero__bg.ready { transform:scale(1); }

/* ── Where a member stands with the club ──
   A row inside <main>, not a band across the page. The rest of the site puts
   its action controls here — see view-location.php's survey-actions. */
.club-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.club-actions__cta { font-size:.75rem; padding:.55rem 1.25rem; }

/* ── The club's mark, at the head of the card that describes it ── */
.club-logo {
    width:100%; height:88px; border-radius:var(--radius);
    margin-bottom:1.25rem; padding:.5rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--emerald); font-size:2rem; overflow:hidden;
}
.club-logo img { width:100%; height:100%; object-fit:contain; display:block; }

/* ── Member badge ── */
.member-badge { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .9rem; border-radius:100px; border:1px solid var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.pending-badge { border-color:rgba(200,160,58,.4); color:#c8a03a; background:rgba(200,160,58,.1); }

/* ── Body layout ── */
/* .club-body is gone: the body is a <section class="pb-5"> like every other
   detail page, so the page's own rhythm applies. */
/* The gutter comes from .row.g-4, the way view-location.php does it. */
/* Stacking below 992px is the grid's job too; g-4 keeps the rows apart. */

/* ── Content sections ── */
/*
 * A content block, the same card as the sidebar widget opposite it. Without
 * this the left column sat on the page ground while the right one was a card,
 * so the two halves of the same page read as different designs.
 */
.club-section {
    background:var(--bg-card); border-radius:var(--radius-lg);
    padding:1.5rem; margin-bottom:1.25rem;
}
@media(max-width:575px) { .club-section { padding:1.25rem; } }
.club-section__title { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.club-section__title::after { content:''; flex:1; height:1px; background:var(--rule); }
.club-details { font-size:.9rem; color:var(--ink-2); line-height:1.9; }
.club-details p { margin-bottom:1rem; }

/* ── Member list ── */
.member-list { display:flex; flex-direction:column; gap:.5rem; }
/* Inset on the card, and the hover is a ring so nothing shifts by a pixel. */
.member-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; background:var(--parchment-dim); border-radius:var(--radius); text-decoration:none; transition:box-shadow .2s, background .2s; }
.member-item:hover { background:var(--emerald-xdim);}
.member-item__avatar { width:36px; height:36px; border-radius:50%; background:var(--bg-2); display:flex; align-items:center; justify-content:center; color:var(--emerald); font-size:.8rem; overflow:hidden; flex-shrink:0; }
.member-item__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.member-item__name { font-size:.85rem; font-weight:600; color:var(--ink); flex:1; }
.member-item__role { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); }
.member-item__admin { font-family:var(--font-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .5rem; border-radius:100px; border:1px solid var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }

/* ── Sidebar widgets ── */
.sidebar-widget { background:var(--bg-card); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1.25rem; }
.sidebar-widget__title { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.sidebar-widget__title::after { content:''; flex:1; height:1px; background:var(--rule); }
.sidebar-meta-row { display:flex; flex-direction:column; gap:.6rem; }
.sidebar-meta-item { display:flex; flex-direction:column; gap:.15rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule); }
.sidebar-meta-item:last-child { border-bottom:none; padding-bottom:0; }
.sidebar-meta-label { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.sidebar-meta-val { font-size:.82rem; color:var(--ink-2); }
.sidebar-meta-val a { color:var(--emerald); text-decoration:none; }
.sidebar-meta-val a:hover { color:var(--emerald-lt); }

/* ── Join request form ── */
.join-form { display:flex; flex-direction:column; gap:.85rem; }
/* --bg on the card's --bg-card reads at 1.12:1, the separation the account
   side uses. Dropping the border without stepping the ground would leave the
   field at 1.000:1 against its container — invisible. */
.join-form textarea { background:var(--bg); border:0; border-radius:var(--radius); color:var(--ink); font-family:var(--font-body); font-size:.85rem; padding:.75rem 1rem; width:100%; resize:vertical; min-height:80px; outline:none; transition:box-shadow .2s; }
.join-form textarea:focus { box-shadow:0 0 0 2px var(--emerald); }
.join-form textarea::placeholder { color:var(--ink-4); }

/* ── Alert ── */
.ot-alert { padding:.85rem 1rem; border-radius:var(--radius); font-size:.82rem; margin-bottom:1rem; display:none; }
.ot-alert.is-success { display:block; background:var(--emerald-dim); border:1px solid var(--emerald-rule); color:var(--emerald-lt); }
.ot-alert.is-error   { display:block; background:var(--red-dim);     border:1px solid var(--red-rule);     color:var(--red); }

/* ── Breadcrumb ── */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-3); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald); }
.art-breadcrumb__sep { color:var(--ink-4); }

/* ── Club journal ──
   Articles linked to this club through ot_blog_clubs. */
.club-journal { margin-top: 2.5rem; }
.club-journal__title {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 800;
    color: var(--ink); display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem;
}
.club-journal__title i { color: var(--emerald); }
.club-journal__lead { font-size: .82rem; color: var(--ink-2); margin-bottom: 1.25rem; }

.club-journal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
@media(max-width:767px) { .club-journal__grid { grid-template-columns: 1fr; } }

.journal-card {
    display: flex; gap: .85rem; align-items: stretch;
    background: var(--bg-card); border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.journal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.journal-card__thumb { width: 84px; flex: none; overflow: hidden; background: var(--bg-3); }
.journal-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journal-card__body { padding: .7rem .85rem .7rem 0; min-width: 0; }
.journal-card__date {
    font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--emerald-lt); margin-bottom: .2rem;
}
.journal-card__title {
    font-family: var(--font-display); font-size: .86rem; font-weight: 700;
    color: var(--ink); line-height: 1.3; margin-bottom: .25rem;
}
.journal-card:hover .journal-card__title { color: var(--emerald-lt); }

/* Which kind of writing a card is: the club's own entry, or a site article
   that mentions the club. The date line carries it so the card keeps one row
   of metadata rather than growing another. */
.journal-card__kind {
    margin-left: .5rem; padding-left: .5rem;
    color: var(--ink-4);
}
.journal-card__kind::before { content: '·'; margin-right: .5rem; }

/* ── A journal entry's own page ── */
.journal-entry__lead {
    font-size: .95rem; color: var(--ink); line-height: 1.7;
    margin-bottom: 1.25rem;
}
.journal-entry__body { font-size: .88rem; color: var(--ink-2); line-height: 1.85; }
.journal-entry__body p { margin-bottom: 1rem; }
.journal-entry__body h2, .journal-entry__body h3 {
    font-family: var(--font-display); color: var(--ink);
    font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 .6rem;
}
.journal-entry__body ul, .journal-entry__body ol { margin: 0 0 1rem 1.25rem; }
.journal-entry__body li { margin-bottom: .35rem; }
.journal-entry__body a { color: var(--emerald); }
.journal-entry__body a:hover { color: var(--emerald-lt); }
.journal-entry__body img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* The write-up link in an event's sidebar. */
.journal-cta { width: 100%; justify-content: center; text-align: center; }
.journal-card__summary {
    font-size: .74rem; color: var(--ink-2); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Shared placeholder for a link thumbnail with no image; the blog sidebar's
   club rows use it too. */
.link-thumb__fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-3); color: var(--ink-2); font-size: .8rem;
}

/* ── Club events ──
   Replaces the "Events system coming soon" placeholder and its inline style. */
.club-section__empty { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-2); font-style: italic; }
.club-section__intro { font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem; }

.club-event {
    display: flex; gap: .85rem; align-items: center;
    background: var(--bg-card); border-radius: var(--radius-lg);
    padding: .7rem .9rem; margin-bottom: .55rem; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.club-event:hover { transform: translateX(3px); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.club-event__date {
    width: 48px; flex: none; text-align: center;
    background: var(--bg); border-radius: var(--radius); padding: .35rem .2rem;
}
.club-event__day { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--emerald); line-height: 1; }
.club-event__mon { display: block; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.club-event__info { min-width: 0; }
.club-event__title { font-family: var(--font-display); font-size: .86rem; font-weight: 700; color: var(--ink); margin-bottom: .1rem; }
.club-event:hover .club-event__title { color: var(--emerald-lt); }
.club-event__meta { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; color: var(--ink-2); }
.club-event__flag { color: var(--amber-lt); }