/* Clay Pittsburgh Potters Directory */

.cpd-directory,
.cpd-submit-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1a1a;
    max-width: 960px;
    margin: 0 auto;
}

.cpd-directory *, .cpd-submit-wrap * { box-sizing: border-box; }

/* ── Directory header ─────────────────────────────────────── */
.cpd-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 4px;
}
.cpd-title {
    font-size: 26px;
    font-weight: 400;
    font-family: Georgia, serif;
    margin: 0 0 8px;
    color: #1a1a1a;
}
.cpd-subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 0 22px;
}

/* ── Zone filter ──────────────────────────────────────────── */
.cpd-filter-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.cpd-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

/* ── Count ────────────────────────────────────────────────── */
.cpd-count {
    font-size: 13px;
    color: #888;
    margin: 0 0 14px;
}

/* ── Card grid ────────────────────────────────────────────── */
.cpd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}
.cpd-no-results {
    font-size: 14px;
    color: #888;
    grid-column: 1 / -1;
    padding: 1.5rem 0;
}

/* ── Card ─────────────────────────────────────────────────── */
.cpd-card {
    background: #fff;
    border: 1px solid #e5e2dd;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cpd-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}
.cpd-card-location {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cpd-zone-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 99px;
    white-space: nowrap;
}
.cpd-zone-north   { background: #E6F1FB; color: #0C447C; }
.cpd-zone-between { background: #E1F5EE; color: #085041; }
.cpd-zone-south   { background: #FAEEDA; color: #633806; }
.cpd-card-hood {
    font-size: 12px;
    color: #888;
}
.cpd-card-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}
.cpd-card-link a {
    font-size: 12px;
    color: #2a5298;
    text-decoration: none;
    word-break: break-all;
}
.cpd-card-link a:hover { text-decoration: underline; }

/* ── Submission form ──────────────────────────────────────── */
.cpd-form-note {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 22px;
    padding: 12px 16px;
    background: #f8f6f2;
    border-left: 3px solid #bbb;
    border-radius: 0 6px 6px 0;
}
.cpd-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.cpd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cpd-field-full { grid-column: 1 / -1; }
.cpd-field label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}
.cpd-label-hint { font-weight: 400; color: #999; }
.cpd-field input,
.cpd-field select,
.cpd-field textarea {
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    width: 100%;
}
.cpd-field textarea { resize: vertical; }
.cpd-field-hint {
    font-size: 12px;
    color: #999;
    margin: 2px 0 0;
}
.cpd-word-count {
    font-size: 12px;
    color: #999;
    text-align: right;
    margin: 2px 0 0;
}
.cpd-qualifier {
    background: #f8f6f2;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
}
.cpd-qualifier label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
}
.cpd-qualifier input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}
.cpd-submit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.cpd-btn-submit {
    background: #2a5298;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.cpd-btn-submit:hover { background: #1e3d7a; }
.cpd-submit-note { font-size: 12px; color: #999; }

.cpd-success {
    background: #e6f5ec;
    border: 1px solid #a8d5b5;
    color: #1a5c36;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.cpd-error {
    background: #fce9e9;
    border: 1px solid #e8a0a0;
    color: #8a1c1c;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .cpd-form-grid { grid-template-columns: 1fr; }
    .cpd-field-full { grid-column: 1; }
}