/* =========================================================
   Best Ever Medical — Single Event/Article Template
   Loads ONLY on single Event posts (is_singular('event'), see
   functions.php). Depends on custom.css for :root variables, header,
   footer, .rv-up reveal system, and the shared .cta-section/.cta-form
   ("Book a Call") component — only this template's own unique
   article-hero/article-body/event-box/related-articles styles live
   here.

   IMPORTANT — body typography targets GENERIC tags (p, h3, ul,
   blockquote) inside .ab-container, not custom classes like the
   static reference's .ab-p/.ab-h3/.ab-ul/.ab-quote. The article body
   is rendered via WordPress's standard the_content() (block editor),
   so a client writing/reordering paragraphs, headings, lists, and
   quotes needs them all styled automatically — they have no way to
   add custom classes from the editor UI. See the docblock on
   bem_register_event_cpt() in functions.php for the full reasoning.
   ========================================================= */

/* --- Article Hero (editorial style) --- */
.article-hero { padding: 180px 5vw 60px 5vw; background-color: var(--bg-cream); position: relative; z-index: 10; }
.ah-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

.ah-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
/* Initial hidden state for the GSAP entrance reveal in event.js
   (mirrors .inner-hero's own pattern in custom.css — start hidden/
   offset, the reveal timeline animates both to visible). */
.ah-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 6.5vw, 90px); line-height: 1.05; font-weight: 400; color: var(--text-dark); margin: 0; letter-spacing: -0.02em; flex: 1; max-width: 900px; opacity: 0; transform: translateY(30px); }
.ah-meta { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; text-align: right; opacity: 0; transform: translateY(30px); }
.ah-meta-author { font-size: 13px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 1px; }
.ah-meta-date { font-size: 13px; font-weight: 500; color: #64748b; }

.ah-image-wrap { width: 100%; height: 65vh; min-height: 400px; border-radius: 24px; overflow: hidden; position: relative; opacity: 0; transform: translateY(40px); box-shadow: 0 30px 60px rgba(0,0,0,0.08); }
/* !important on sizing: same Elementor `.elementor img { height:auto }`
   collision confirmed on the Homepage's hero stack cards — height:auto
   breaks object-fit:cover since cover needs both dimensions
   constrained. Fixed here pre-emptively instead of waiting to hit it. */
.ah-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.05); }

/* --- Article Body (constrained width, generic content-editor typography) --- */
.article-body { padding: 60px 5vw 120px 5vw; background-color: var(--bg-cream); position: relative; z-index: 10; }
.ab-container { max-width: 800px; margin: 0 auto; }

.ab-container p { font-family: 'DM Sans', sans-serif; font-size: 19px; line-height: 1.8; color: #334155; font-weight: 400; margin: 0 0 30px 0; }
.ab-container > p:first-of-type { font-size: 22px; line-height: 1.6; color: var(--text-dark); font-weight: 300; } /* Intro paragraph emphasis */

.ab-container h2, .ab-container h3 { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 500; color: var(--primary-dark); margin: 60px 0 25px 0; line-height: 1.2; letter-spacing: -0.01em; }

/* !important + explicit .wp-block-quote/.wp-block-pullquote classes:
   WordPress's own block-library stylesheet (auto-loaded on any post
   using the block editor, regardless of theme) ships its own quote
   styling that was winning over the plain `blockquote` selector —
   same collision pattern hit repeatedly elsewhere in this build
   (Elementor Kit, reset.css), just via WP core this time. Targeting
   both possible block types since the Quote block and Pullquote
   block both render a <blockquote>, but style very differently by
   default — this override applies regardless of which was used. */
.ab-container blockquote,
.ab-container .wp-block-quote,
.ab-container .wp-block-pullquote blockquote {
    position: relative !important; padding: 40px 0 40px 40px !important; margin: 60px 0 !important;
    border-left: 2px solid var(--card-gold) !important; border-right: none !important; text-align: left !important;
}
.ab-container blockquote p,
.ab-container .wp-block-quote p,
.ab-container .wp-block-pullquote p {
    font-family: 'Cormorant Garamond', serif !important; font-size: clamp(28px, 4vw, 42px) !important;
    font-weight: 400 !important; font-style: italic !important; color: var(--primary-dark) !important;
    line-height: 1.25 !important; margin: 0 !important; letter-spacing: -0.01em !important;
}
.ab-container blockquote cite { display: none; } /* citation field not used in this design */

.ab-container ul, .ab-container ol { list-style: none; padding: 0; margin: 0 0 40px 0; }
.ab-container ul li, .ab-container ol li { font-size: 18px; line-height: 1.7; color: #475569; margin-bottom: 15px; padding-left: 24px; position: relative; }
.ab-container ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary); }
.ab-container ol { counter-reset: ab-ol; }
.ab-container ol li::before { counter-increment: ab-ol; content: counter(ab-ol) '.'; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; }
.ab-container li strong { color: var(--text-dark); font-weight: 600; }

/* Images the client embeds via the block editor's Image block. Not
   in the static reference's own article content, but a real CMS
   author will eventually drop one in — !important for the same
   Elementor img-reset reason as .ah-image above. */
.ab-container img { max-width: 100% !important; height: auto !important; border-radius: 12px; margin: 10px 0 30px 0; display: block; }
.ab-container figcaption { font-size: 14px; color: #64748b; text-align: center; margin-top: -20px; margin-bottom: 30px; }

/* Media & Text block — WordPress core already handles the grid
   layout and mobile stacking (<600px) automatically; this only adds
   this site's own visual polish (rounded image, matching typography)
   so it blends into the article instead of looking like unstyled
   default WordPress output. */
.ab-container .wp-block-media-text { margin: 50px 0; }
.ab-container .wp-block-media-text__media img { border-radius: 16px !important; width: 100% !important; height: auto !important; display: block; }
.ab-container .wp-block-media-text__content { padding: 0 0 0 6%; }
.ab-container .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 6% 0 0; }
.ab-container .wp-block-media-text__content p { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.7; color: #475569; margin: 0 0 15px 0; }
.ab-container .wp-block-media-text__content h2,
.ab-container .wp-block-media-text__content h3 { margin: 0 0 15px 0; font-size: 28px; }
@media (max-width: 600px) {
    /* WP core switches the grid to a single column here already —
       just removing the side padding that no longer makes sense once
       stacked. */
    .ab-container .wp-block-media-text__content,
    .ab-container .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 30px 0 0 0; }
}

/* --- Event Details box --- */
.event-box { background: var(--white); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 40px; margin: 60px 0; box-shadow: 0 20px 40px rgba(0,0,0,0.02); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.eb-item { display: flex; flex-direction: column; gap: 8px; }
.eb-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #94a3b8; font-weight: 700; }
.eb-val { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; color: var(--text-dark); }
.eb-full { grid-column: 1 / -1; }

.ab-btn-wrap { margin-top: 60px; text-align: center; }
/* !important on background/color: real <button>/<a>-as-button styling
   colliding with reset.css has hit repeatedly elsewhere in this
   build (FAQ toggle, filter pills) — pre-emptive here too. */
.ab-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-dark) !important; color: var(--white) !important; padding: 18px 40px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; text-decoration: none; transition: all 0.3s ease; }
.ab-btn:hover { background: var(--primary) !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(25, 123, 71, 0.2); }

/* --- Further Reading (related articles) --- */
.related-section { padding: 100px 5vw; background: var(--white); border-top: 1px solid rgba(0,0,0,0.08); }
.rs-container { max-width: 1400px; margin: 0 auto; }
.rs-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 400; color: var(--text-dark); margin: 0 0 60px 0; text-align: center; letter-spacing: -0.02em; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; }
/* .article-card / .article-img-wrap (base) / .article-img / .article-meta /
   .article-title / .article-excerpt moved to custom.css — shared with
   the Events & News hub page's card grids (identical styling, just a
   different img-wrap height and grid gap in each context, kept here
   since those two values genuinely differ per page). */
.article-img-wrap { height: 280px; }

/* --- Mobile / tablet --- */
@media (max-width: 1024px) {
    .ah-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .ah-meta { text-align: left; }
    .article-grid { grid-template-columns: repeat(2, 1fr); gap: 6vw; }
}

@media (max-width: 768px) {
    .article-hero { padding: 140px 5vw 40px 5vw; }
    .ah-image-wrap { height: 40vh; min-height: 300px; }
    .article-body { padding: 40px 5vw 80px 5vw; }
    .ab-container p { font-size: 17px; }
    .ab-container h2, .ab-container h3 { font-size: 32px; }
    .event-box { grid-template-columns: 1fr; padding: 25px; gap: 20px; }
    .eb-full { grid-column: auto; }
    .article-grid { grid-template-columns: 1fr; gap: 50px; }
    .article-img-wrap { height: 260px; }
}