/* Cebu Pickleball Hub Homepage */

.cph-home {
    --cph-green: #1d6b4f;
    --cph-dark: #10241c;
    --cph-text: #18211d;
    --cph-muted: #68736e;
    --cph-light: #f4f7f5;
    --cph-border: #e1e8e4;
    color: var(--cph-text);
    overflow: hidden;
}

.cph-home a { text-decoration: none; }
.cph-home-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.cph-eyebrow,
.cph-small-label {
    margin: 0;
    color: var(--cph-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.cph-home-hero {
    background: var(--cph-dark);
    color: #fff;
    padding: 70px 0 80px;
}

.cph-hero-inner {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 65px;
    align-items: center;
}

.cph-hero-copy h1 {
    margin: 18px 0 22px;
    font-size: clamp(48px, 6.2vw, 82px);
    line-height: .93;
    letter-spacing: -4px;
    font-weight: 500;
}

.cph-hero-copy h1 em {
    color: #8fd0ad;
    font-style: normal;
}

.cph-hero-text {
    max-width: 610px;
    margin: 0;
    color: #c5d0ca;
    font-size: 18px;
    line-height: 1.65;
}

.cph-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.cph-home-btn {
    min-height: 50px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 800;
}

.cph-home-btn-primary {
    background: #79bf9b;
    color: #10241c !important;
}

.cph-home-btn-light {
    background: #fff;
    color: #14231d !important;
}

.cph-hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 48px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.cph-hero-stats div { display: flex; flex-direction: column; gap: 4px; }
.cph-hero-stats strong { font-size: 20px; }
.cph-hero-stats span { color: #aebbb4; font-size: 12px; }

.cph-hero-visual { position: relative; }
.cph-hero-placeholder {
    aspect-ratio: 1 / .88;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #dce7e1;
    color: #314b40;
    text-align: center;
}
.cph-hero-placeholder span { font-size: 18px; }
.cph-hero-placeholder strong { font-size: clamp(60px, 8vw, 110px); line-height: .9; letter-spacing: -5px; }
.cph-hero-placeholder small { margin-top: 18px; color: #64756c; font-size: 11px; }

.cph-hero-float {
    position: absolute;
    left: -25px;
    bottom: 25px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    color: var(--cph-text);
    border-radius: 10px;
    padding: 15px 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,.18);
}
.cph-float-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #3ca572;
}
.cph-hero-float strong { display:block; font-size: 13px; }
.cph-hero-float small { display:block; margin-top: 2px; color: var(--cph-muted); }

.cph-home-search { margin-top: -35px; position: relative; z-index: 2; }
.cph-search-card {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 35px;
    align-items: center;
    padding: 28px 30px;
    border: 1px solid var(--cph-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(20,50,37,.08);
}
.cph-search-card h2 { margin: 5px 0 5px; font-size: 25px; }
.cph-search-card p:not(.cph-small-label) { margin: 0; color: var(--cph-muted); font-size: 14px; }
.cph-search-form { display:grid; grid-template-columns: 1.5fr .85fr auto; gap: 9px; }
.cph-search-input { display:flex; align-items:center; gap:7px; border:1px solid var(--cph-border); border-radius:7px; padding: 0 13px; }
.cph-search-input span { font-size: 21px; color: var(--cph-muted); }
.cph-search-input input,
.cph-search-form select {
    width:100%; height:48px; border:0; outline:0; background:transparent; font:inherit; color:var(--cph-text);
}
.cph-search-form select { border:1px solid var(--cph-border); border-radius:7px; padding:0 10px; }
.cph-search-form button {
    border:0; border-radius:7px; background:var(--cph-green); color:#fff; padding:0 19px; font-weight:800; cursor:pointer;
}

.cph-home-section { padding: 100px 0; }
.cph-section-top { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom: 34px; }
.cph-section-top h2 { margin: 7px 0 8px; font-size: 42px; letter-spacing:-1.5px; }
.cph-section-top p:not(.cph-small-label) { margin:0; color:var(--cph-muted); }
.cph-text-link, .cph-card-arrow { color:var(--cph-green); font-weight:800; }

.cph-home-court-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cph-home-court-card { overflow:hidden; border:1px solid var(--cph-border); border-radius:13px; background:#fff; }
.cph-home-card-image { display:block; aspect-ratio: 1.5; overflow:hidden; background:#dce7e1; }
.cph-home-card-image img { width:100%; height:100%; object-fit:cover; display:block; }
.cph-home-placeholder { width:100%; height:100%; min-height:170px; display:grid; place-items:center; background:#dce7e1; color:#466056; font-weight:700; }
.cph-home-card-body { padding:22px; }
.cph-card-tag { display:inline-block; padding:6px 9px; background:#e9f4ee; color:var(--cph-green); border-radius:999px; font-size:10px; font-weight:800; }
.cph-home-card-body h3 { margin:13px 0 6px; font-size:22px; line-height:1.15; }
.cph-home-card-body h3 a { color:var(--cph-text); }
.cph-home-card-body p { margin:0 0 14px; color:var(--cph-muted); font-size:13px; }
.cph-card-meta { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:17px; }
.cph-card-meta span { padding:6px 8px; background:var(--cph-light); border-radius:5px; color:var(--cph-muted); font-size:11px; }

.cph-community-section { background:var(--cph-light); padding:105px 0; }
.cph-community-heading { max-width:650px; margin-bottom:40px; }
.cph-community-heading h2 { margin:8px 0 12px; font-size:50px; line-height:1; letter-spacing:-2px; }
.cph-community-heading p:not(.cph-small-label) { color:var(--cph-muted); line-height:1.6; }
.cph-community-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cph-community-card { min-height:275px; padding:25px; display:flex; flex-direction:column; border:1px solid var(--cph-border); border-radius:13px; background:#fff; color:var(--cph-text) !important; }
.cph-community-card.cph-community-dark { background:var(--cph-dark); color:#fff !important; border-color:var(--cph-dark); }
.cph-community-number { font-size:11px; color:var(--cph-green); font-weight:800; }
.cph-community-dark .cph-community-number { color:#8fd0ad; }
.cph-community-card strong { margin-top:auto; font-size:23px; line-height:1.1; }
.cph-community-card p { color:var(--cph-muted); font-size:13px; line-height:1.55; }
.cph-community-dark p { color:#b9c7c0; }
.cph-community-arrow { color:var(--cph-green); font-size:12px; font-weight:800; }
.cph-community-dark .cph-community-arrow { color:#8fd0ad; }

.cph-city-section { padding-bottom:105px; }
.cph-city-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cph-city-card { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border:1px solid var(--cph-border); border-radius:9px; color:var(--cph-text) !important; font-weight:700; }
.cph-city-card strong { color:var(--cph-green); }
.cph-city-card:hover { border-color:var(--cph-green); }

.cph-guides-section { background:#fff; padding:105px 0; border-top:1px solid var(--cph-border); }
.cph-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cph-guide-card { border:1px solid var(--cph-border); border-radius:13px; overflow:hidden; }
.cph-guide-image { display:block; aspect-ratio:1.6; background:#dce7e1; }
.cph-guide-image img { width:100%; height:100%; object-fit:cover; display:block; }
.cph-guide-body { padding:22px; }
.cph-guide-date { margin:0 0 8px; color:var(--cph-muted); font-size:11px; }
.cph-guide-body h3 { margin:0 0 20px; font-size:21px; line-height:1.2; }
.cph-guide-body h3 a { color:var(--cph-text); }

.cph-final-cta { background:var(--cph-dark); color:#fff; padding:75px 0; }
.cph-final-cta .cph-home-wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.cph-final-cta h2 { margin:8px 0; font-size:50px; letter-spacing:-2px; }
.cph-final-cta p:not(.cph-small-label) { margin:0; color:#b9c7c0; }

.cph-no-courts, .cph-guide-placeholder { grid-column:1/-1; padding:40px; border:1px dashed var(--cph-border); border-radius:12px; }
.cph-no-courts h3, .cph-guide-placeholder h3 { margin-top:0; }

@media(max-width: 900px) {
    .cph-hero-inner, .cph-search-card { grid-template-columns:1fr; }
    .cph-home-court-grid, .cph-guide-grid { grid-template-columns:repeat(2,1fr); }
    .cph-community-grid { grid-template-columns:repeat(2,1fr); }
    .cph-city-grid { grid-template-columns:repeat(3,1fr); }
    .cph-search-form { grid-template-columns:1fr 1fr; }
    .cph-search-form button { min-height:48px; }
}

@media(max-width:620px) {
    .cph-home-wrap { width:calc(100% - 28px); }
    .cph-home-hero { padding:45px 0 65px; }
    .cph-hero-copy h1 { letter-spacing:-2px; }
    .cph-hero-text { font-size:16px; }
    .cph-hero-actions { flex-direction:column; }
    .cph-home-btn { width:100%; }
    .cph-hero-float { left:10px; bottom:10px; }
    .cph-home-search { margin-top:-20px; }
    .cph-search-card { padding:22px; }
    .cph-search-form, .cph-home-court-grid, .cph-guide-grid { grid-template-columns:1fr; }
    .cph-community-grid { grid-template-columns:1fr; }
    .cph-city-grid { grid-template-columns:1fr 1fr; }
    .cph-home-section, .cph-community-section, .cph-guides-section { padding:70px 0; }
    .cph-section-top { align-items:start; flex-direction:column; }
    .cph-section-top h2 { font-size:34px; }
    .cph-community-heading h2 { font-size:40px; }
    .cph-final-cta .cph-home-wrap { flex-direction:column; align-items:flex-start; }
    .cph-final-cta h2 { font-size:42px; }
}