/* =============================================================================
   OWW — COMMUNITY PAGE
   assets/css/page-community.css | Version: 3.7.0
   Scope: .oww-community / body.oww-page--community
   ============================================================================= */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.oww-community__hero {
    padding:    clamp(6rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

.oww-community__hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205,165,100,.07) 0%, transparent 70%);
    pointer-events: none;
}

.oww-community__hero-eyebrow {
    display:        block;
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  var(--oww-space-md);
}

.oww-community__hero-title {
    font-family: var(--oww-ff-display);
    font-size:   clamp(2.4rem, 7vw, 5.5rem);
    font-weight: 200;
    color:       var(--oww-cream);
    line-height: 1.05;
    margin:      0 auto var(--oww-space-lg);
    max-width:   680px;
}

.oww-community__hero-copy {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.1rem, 2vw, 1.5rem);
    font-style:  italic;
    font-weight: 300;
    line-height: 1.6;
    color:       var(--oww-cream-muted);
    max-width:   500px;
    margin:      0 auto;
}

/* ── NEWSLETTER JOIN ──────────────────────────────────────────────────────── */

.oww-community__join {
    background:    var(--oww-bg-card);
    border:        1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-lg);
    padding:       clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    margin:        clamp(3rem, 6vw, 5rem) 0;
    position:      relative;
    overflow:      hidden;
}

.oww-community__join::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: linear-gradient(90deg, transparent, var(--oww-amber-deep) 25%, var(--oww-amber) 50%, var(--oww-amber-deep) 75%, transparent);
}

.oww-community__join-inner {
    display:     flex;
    gap:         clamp(2rem, 5vw, 4rem);
    align-items: flex-start;
    flex-wrap:   wrap;
}

.oww-community__join-copy {
    flex:      1;
    min-width: 260px;
}

.oww-community__join-eyebrow {
    display:        block;
    font-size:      .62rem;
    font-weight:    700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  .6rem;
}

.oww-community__join h2 {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 300;
    color:       var(--oww-cream);
    margin:      0 0 var(--oww-space-md);
    line-height: 1.15;
}

.oww-community__join-form-wrap {
    flex:      1;
    min-width: 280px;
}

.oww-community__join-form {
    display:  flex;
    flex-wrap: wrap;
    gap:       .75rem;
}

.oww-community__join-input {
    flex:             1;
    min-width:        200px;
    background:       var(--oww-bg-raised);
    border:           1px solid var(--oww-bronze-20);
    border-radius:    var(--oww-radius-md);
    color:            var(--oww-cream);
    font-family:      var(--oww-ff-body);
    font-size:        .9rem;
    padding:          .7em 1.1em;
    outline:          none;
    transition:       border-color .2s var(--oww-ease-out);
    min-height:       48px;
}

.oww-community__join-input:focus { border-color: var(--oww-amber); }
.oww-community__join-input::placeholder { color: var(--oww-cream-faint); }

/* ── WHAT YOU GET ─────────────────────────────────────────────────────────── */

.oww-community__perks {
    padding:    clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--oww-bronze-20);
}

.oww-community__perks-title {
    font-family:   var(--oww-ff-display);
    font-size:     clamp(1.4rem, 3vw, 2rem);
    font-weight:   300;
    color:         var(--oww-cream);
    margin:        0 0 clamp(2rem, 4vw, 3rem);
    text-align:    center;
}

.oww-community__perks-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   1.25rem;
}

@media (min-width: 768px) {
    .oww-community__perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .oww-community__perks-grid { grid-template-columns: repeat(4, 1fr); }
}

.oww-perk-card {
    background:  var(--oww-bg-card);
    border:      1px solid var(--oww-bronze-10);
    border-radius: var(--oww-radius-md);
    padding:     1.5rem;
    display:     flex;
    flex-direction: column;
    gap:         .75rem;
}

.oww-perk-card__icon {
    width:   32px;
    height:  32px;
    color:   var(--oww-amber);
    opacity: .8;
}

.oww-perk-card__title {
    font-family: var(--oww-ff-display);
    font-size:   1.1rem;
    font-weight: 400;
    color:       var(--oww-cream);
    margin:      0;
}

.oww-perk-card__desc {
    font-size:   .83rem;
    color:       var(--oww-cream-muted);
    line-height: 1.6;
    margin:      0;
}

/* ── SUPPORT SECTION ──────────────────────────────────────────────────────── */

.oww-community__support {
    padding:       clamp(3rem, 6vw, 5rem) 0;
    border-top:    1px solid var(--oww-bronze-20);
    border-bottom: 1px solid var(--oww-bronze-20);
    margin:        clamp(3rem, 6vw, 5rem) 0;
}

.oww-community__support-header {
    text-align:    center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.oww-community__support-header h2 {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.4rem, 3vw, 2rem);
    font-weight: 300;
    color:       var(--oww-cream);
    margin:      0 0 .5rem;
}

.oww-community__support-header p {
    font-size: .9rem;
    color:     var(--oww-cream-muted);
    max-width: 440px;
    margin:    0 auto;
}

.oww-community__support-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   1.25rem;
    max-width:             640px;
    margin:                0 auto;
}

.oww-support-card {
    background:     var(--oww-bg-mid);
    border:         1px solid var(--oww-bronze-20);
    border-radius:  var(--oww-radius-md);
    padding:        1.5rem;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .85rem;
    text-decoration: none;
    transition:     border-color .2s, transform .2s;
    cursor:         default;
    opacity:        .6;
}

.oww-support-card__label {
    font-size:      .6rem;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--oww-cream-faint);
    background:     rgba(245,240,232,.05);
    border:         1px solid rgba(245,240,232,.1);
    border-radius:  4px;
    padding:        .2em .6em;
}

.oww-support-card__name {
    font-family: var(--oww-ff-display);
    font-size:   1.1rem;
    font-weight: 400;
    color:       var(--oww-cream);
    margin:      0;
}

.oww-support-card__desc {
    font-size: .8rem;
    color:     var(--oww-cream-muted);
    margin:    0;
}

/* ── SOCIAL FOLLOW ────────────────────────────────────────────────────────── */

.oww-community__social {
    text-align:    center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.oww-community__social h3 {
    font-family: var(--oww-ff-display);
    font-size:   clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 300;
    color:       var(--oww-cream);
    margin:      0 0 1.25rem;
}

.oww-community__social-link {
    display:         inline-flex;
    align-items:     center;
    gap:             .6rem;
    font-size:       .85rem;
    font-weight:     600;
    color:           var(--oww-cream);
    text-decoration: none;
    border:          1px solid var(--oww-bronze-20);
    border-radius:   var(--oww-radius-md);
    padding:         .6em 1.2em;
    transition:      border-color .2s, color .2s;
}

.oww-community__social-link:hover {
    border-color: var(--oww-amber);
    color:        var(--oww-amber);
}

.oww-community__social-link svg {
    width: 18px; height: 18px;
}