/**
 * p-cards.css v1.0
 * Картки груп на сторінці гуртка (page.php → p-cards.js)
 * Кольори відділу через --dep-c1..c4
 */

/* ══ ГРІД КАРТОК ══ */
.page-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-5);
}

/* ══ КАРТКА ══ */
.page-card {
    background: var(--c-surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--tr), transform var(--tr);
}
.page-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ══ ШАПКА КАРТКИ ══ */
.pc-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: linear-gradient(135deg, var(--dep-c1), var(--dep-c2));
    position: relative;
}

/* Велике коло з номером групи */
.pc-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 900;
    color: var(--dep-c3);
    flex-shrink: 0;
}

.pc-head-info {
    flex: 1;
    min-width: 0;
}

.pc-name {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--dep-c3);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* ID групи — бейдж */
.pc-gid {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px var(--sp-2);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ══ ВИКЛАДАЧ ══ */
.pc-teacher {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

.pc-teacher-photo {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--c-border);
}

.pc-teacher-details { flex: 1; min-width: 0; }

.pc-teacher-name {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 2px;
}

.pc-teacher-contact { margin-top: 2px; }

.pc-teacher-phone,
.pc-teacher-email {
    font-size: var(--text-xs);
    color: var(--c-primary);
    text-decoration: none;
    transition: color var(--tr);
}
.pc-teacher-phone:hover,
.pc-teacher-email:hover { color: var(--c-primary-dark); }

/* ══ ХАРАКТЕРИСТИКИ (2×2 grid) ══ */
.pc-meta {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pc-meta-row {
    display: flex;
    gap: var(--sp-4);
}

.pc-meta-cell {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex: 1;
}

.pc-meta-cell--end {
    justify-content: flex-end;
}

.pc-meta-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.pc-meta-value {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--c-primary-darker);
}

/* ══ ТІЛО: розклад + кнопка ══ */
.pc-body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
}

/* ── Рядки розкладу ── */
.pc-sched {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.pc-sched-row {
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    overflow: hidden;
}

.pc-sched-main {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
}

.pc-day-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px var(--sp-2);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--dep-c1), var(--dep-c2));
    color: var(--dep-c3);
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.pc-time {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--c-primary-darker);
}

.pc-sched-addr {
    padding: var(--sp-1) var(--sp-3) var(--sp-2);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    border-top: 1px solid var(--c-border);
}

/* ── Кнопка реєстрації ── */
.pc-reg-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--dep-c1), var(--dep-c2));
    color: var(--dep-c3);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--tr), transform var(--tr);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    margin-top: auto;
}
.pc-reg-btn:hover { opacity: .88; transform: scale(1.02); color: var(--dep-c3); }

.pc-reg-btn--disabled {
    background: var(--c-border);
    color: var(--c-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: .6;
}
.pc-reg-btn--disabled:hover { transform: none; opacity: .6; }