/* ==========================================================================
   Plunge Masters homepage — page-specific styles.
   Loads after pool.css (shared tokens, fonts, masthead, footer, buttons).
   ========================================================================== */

/* --- Hero carousel ------------------------------------------------------- */
.hp-hero {
    position:relative;
    width:100%;
    height:452px;
    background:var(--hero-navy);
    overflow:hidden;
}
.hp-hero__slide {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 900ms ease;
}
.hp-hero__slide.is-active { opacity:1; }
.hp-hero__overlay {
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,
        rgba(8,26,43,0.34) 0%,
        rgba(8,26,43,0) 26%,
        rgba(8,26,43,0) 55%,
        rgba(8,26,43,0.62) 100%);
}
.hp-hero__btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.16);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hp-hero__btn:hover { background:rgba(255,255,255,0.28); }
.hp-hero__btn--prev { left:20px; }
.hp-hero__btn--next { right:20px; }
.hp-hero__dots {
    position:absolute;
    right:var(--pad-x);
    top:26px;
    display:flex;
    gap:7px;
}
.hp-hero__dot {
    width:8px;
    height:8px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,0.45);
    cursor:pointer;
}
.hp-hero__dot.is-active { background:#fff; }

/* --- Section spacing modifiers -------------------------------------------- */
.hp-section--news { padding-top:32px; }  /* breathing room below the hero */
.hp-section--joinus { padding-top:52px; }
.hp-section--visit { padding-bottom:48px; }

/* --- 01 News ------------------------------------------------------------- */
.hp-news__list { flex:1.7; min-width:0; }
.hp-news__aside { flex:1; min-width:0; }
.hp-news-card {
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    padding:24px 26px;
}
.hp-news-card + .hp-news-card { margin-top:16px; }
.hp-news-card__date {
    font-family:var(--serif);
    font-style:italic;
    font-size:14px;
    color:var(--muted);
    margin-bottom:6px;
}
/* padding, not margin: the `.hp h3` reset in pool.css zeroes the title's margin,
   but leaves padding alone, so padding-bottom is what actually creates the gap. */
.hp-news-card__title { font-size:19px; padding-bottom:0.5rem; }
.hp-news-card__body { font-size:14.5px; line-height:1.6; color:var(--body); }
/* Space between blocks (e.g. multiple <p>). Overrides the zero-specificity
   `:where(.hp p)` reset; the first/last-child rules below flush the edges. */
.hp-news-card__body > * { margin-bottom:0.5rem; }
.hp-news-card__body > *:first-child { margin-top:0; }
.hp-news-card__body > *:last-child { margin-bottom:0; }

/* Mailing-list card */
.hp-mailing {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    padding:26px;
}
.hp-mailing h3 { font-size:19px; margin:8px 0; }
.hp-mailing p { font-size:14px; line-height:1.6; color:var(--body); margin-bottom:18px; }
.hp-mailing .hp-btn { padding:11px 16px; font-size:14px; }  /* design: compact button */

/* --- 02 Join Us ---------------------------------------------------------- */
.hp-cards { display:flex; gap:var(--gap-card); }
.hp-joincard {
    flex:1;
    min-width:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    padding:26px;
}
.hp-joincard h3 { font-size:20px; margin:8px 0 6px; }
.hp-joincard__intro { font-size:14.5px; line-height:1.6; color:var(--body); margin-bottom:20px; }
.hp-joincard__intro--tight { margin-bottom:16px; }
.hp-steps { display:flex; flex-direction:column; gap:15px; }
.hp-steps--loose { gap:13px; }
.hp-step { display:flex; gap:13px; align-items:flex-start; }
.hp-step__badge {
    flex:0 0 auto;
    width:25px;
    height:25px;
    margin-top:1px;
    border-radius:50%;
    background:var(--tint);
    color:var(--brand-deep);
    font-family:var(--mono);
    font-size:12px;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
}
.hp-step__badge--sym { font-size:13px; }
.hp-step__text { font-size:14.5px; line-height:1.55; color:var(--body); }
.hp-step__text strong { color:var(--ink); font-weight:600; }
.hp-joincard__note {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--border-faint);
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
}

/* --- 03 Membership & Fees ------------------------------------------------ */
.hp-fees__intro { font-size:14.5px; line-height:1.65; color:var(--body); margin-bottom:14px; }
.hp-fees__note { font-size:14px; line-height:1.6; color:var(--muted); }
.hp-fee {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid var(--border-faint);
}
.hp-fee:first-child { border-top:1px solid var(--border); }
.hp-fee:last-of-type { border-bottom:1px solid var(--border); }
.hp-fee__name { font-size:14.5px; font-weight:600; color:var(--ink); }
.hp-fee__desc { font-size:13px; color:var(--muted); }
.hp-fee__price {
    font-family:var(--mono);
    font-size:15px;
    font-weight:500;
    color:var(--ink);
    white-space:nowrap;
}
.hp-fee__price--ask { font-size:14px; color:var(--muted); }
.hp-fee__unit { color:var(--faint); }
.hp-fees__fine { font-size:12.5px; line-height:1.5; color:var(--muted); padding:12px 0 4px; }

/* --- 04 Practices / 05 About --------------------------------------------- */
.hp-pill {
    display:inline-flex;
    align-items:baseline;
    gap:10px;
    background:var(--tint);
    border-radius:var(--radius-ui);
    padding:9px 14px;
    margin-bottom:16px;
}
.hp-pill span {
    font-family:var(--mono);
    font-size:13px;
    font-weight:500;
    color:var(--brand-deep);
}
.hp-pill__sep {
    align-self:center;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--faint);
}
.hp-prose { font-size:14.5px; line-height:1.65; color:var(--body); margin-bottom:14px; }
.hp-prose--muted { font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:0; }
.hp-prose--muted strong { color:var(--ink); font-weight:600; }
.hp-section--practices h2 { margin-bottom:16px; }

/* --- 06 Visit ------------------------------------------------------------ */
.hp-row--stretch { align-items:stretch; }
.hp-visit__map-col { flex:1.5; min-width:0; }
.hp-visit__side { flex:1; min-width:0; }
#map {
    height:250px;
    border-radius:12px;
    border:1px solid var(--border);
    overflow:hidden;
}
.hp-visit__address { font-size:13.5px; color:var(--muted); margin-top:12px; }
.hp-visit__address strong { color:var(--ink); font-weight:600; }
.hp-visit__side h3 { font-size:17px; margin-bottom:6px; }
.hp-visit__side h3 + p { margin-bottom:18px; }
.hp-visit__side p { font-size:14px; line-height:1.6; color:var(--body); }

/* --- Responsive (homepage-specific) --------------------------------------- */
@media (max-width:760px) {
    .hp-hero { height:320px; }
    .hp-cards { flex-direction:column; gap:26px; }
    .hp-news__list, .hp-news__aside,
    .hp-visit__map-col, .hp-visit__side { flex:1 1 auto; width:100%; }
    .hp-section--joinus { padding-top:40px; }
}