/* =============================================================================
   OWW — SHARED COMPONENTS
   assets/css/components.css | Every page (after global.css)
   Replaces all inline style="" attributes in Elementor HTML widgets.
   ============================================================================= */

.oww-section { position: relative; padding: clamp(4rem,9vw,7.5rem) 0; overflow: hidden; }

/* Section header — centred */
.oww-sec-hdr { text-align: center; max-width: 600px; margin: 0 auto clamp(2.5rem,5vw,4rem); }
.oww-sec-hdr--wide { max-width: 760px; }
.oww-sec-hdr--left { text-align: left; margin-left: 0; max-width: none; }
.oww-sec-hdr__eyebrow { display: block; font-size: clamp(.575rem,1vw,.7rem); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--oww-amber); margin-bottom: 10px; }
.oww-sec-hdr__title   { font-family: var(--oww-ff-display); font-size: clamp(1.9rem,3.8vw,2.8rem); font-weight: 300; color: var(--oww-cream); line-height: 1.12; margin-bottom: 6px; }
.oww-sec-hdr__title--lg  { font-size: clamp(2.4rem,5vw,4rem); }
.oww-sec-hdr__title--sm  { font-size: clamp(1.6rem,3vw,2.2rem); }
.oww-sec-hdr__tagline { font-family: var(--oww-ff-display); font-style: italic; font-size: clamp(.95rem,2vw,1.15rem); color: var(--oww-amber); margin-bottom: 10px; }
.oww-sec-hdr__copy    { font-size: clamp(.85rem,1.6vw,1rem); color: var(--oww-cream-muted); line-height: 1.72; }

/* Section row — title left, action right */
.oww-sec-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.oww-sec-row__left  { display: flex; flex-direction: column; gap: 6px; }
.oww-sec-row__title { font-family: var(--oww-ff-display); font-size: clamp(1.9rem,3.8vw,2.8rem); font-weight: 300; color: var(--oww-cream); line-height: 1.12; margin: 0; }

/* Inline form */
.oww-form-inline           { display: flex; gap: 8px; }
.oww-form-inline--centered { max-width: 420px; margin: 0 auto; }
.oww-form-email {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.05); border: 1px solid var(--oww-bronze-30);
    border-radius: var(--oww-radius-sm); padding: .65em 1em;
    font-size: .82rem; font-family: var(--oww-ff-body); color: var(--oww-cream);
    transition: border-color .2s;
}
.oww-form-email::placeholder { color: var(--oww-cream-faint); }
.oww-form-email:focus { border-color: var(--oww-amber); outline: none; box-shadow: 0 0 0 2px rgba(205,165,100,.15); }

/* Hero glow */
.oww-hero-glow {
    position: absolute; width: 700px; height: 600px; border-radius: 50%;
    top: -200px; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(180,115,35,.08) 0%, transparent 65%);
    filter: blur(60px); pointer-events: none; z-index: 0;
}

/* Instructor grid */
.oww-instructor-grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; max-width: 860px; margin: 0 auto; }
@media (max-width: 640px) { .oww-instructor-grid { grid-template-columns: 1fr; } }
.oww-instructor-portrait { aspect-ratio: 3/4; border-radius: var(--oww-radius-md); border: 1px solid var(--oww-bronze-20); background-color: var(--oww-bg-card); background-image: url('/wp-content/uploads/2025/12/Self-Portrait-About-Me.webp'); background-size: cover; background-position: center top; }
.oww-instructor-name  { font-family: var(--oww-ff-display); font-size: clamp(1.5rem,3vw,2rem); font-weight: 300; color: var(--oww-cream); margin-bottom: 4px; }
.oww-instructor-role  { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--oww-amber); margin-bottom: 14px; }
.oww-instructor-bio   { font-size: .9rem; color: var(--oww-cream-muted); line-height: 1.75; margin-bottom: 18px; }
.oww-instructor-creds { display: flex; flex-direction: column; gap: 9px; }
.oww-instructor-cred  { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--oww-cream-muted); }
.oww-instructor-cred svg { color: var(--oww-amber); flex-shrink: 0; width: 15px; height: 15px; }

/* Link utility */
.oww-link-amber { color: var(--oww-amber); border-bottom: 1px solid var(--oww-bronze-30); transition: border-color .2s; }
.oww-link-amber:hover { border-color: var(--oww-amber); }