/* ==========================================================================
   Plymouth Dance Centre — dance-jobs.css
   Loads AFTER dance-classes.css (hero/strip/FAQ/pricing cards reused) and
   adds: role cards, two-column offer/ask checklists.
   ========================================================================== */

.roles-section {
    padding: 96px clamp(24px, 7vw, 112px);
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: var(--container);
    margin: 0 auto;
}

.role-card {
    background: var(--sand);
    padding: 30px 27px;
    border-top: 3px solid var(--coral);
    display: flex;
    flex-direction: column;
}

.role-card__meta {
    display: flex;
    justify-content: space-between;
    color: #4a5c63;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}

.role-card__meta span:last-child { color: var(--coral-ink); }

.role-card h3 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    font-size: 27px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 12px;
}

.role-card p { font-size: 13px; color: #52626a; line-height: 1.65; margin: 0 0 16px; flex: 1; }

.role-card ul { display: flex; flex-direction: column; gap: 8px; }
.role-card li { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: #4a5c63; }
.role-card li i { color: var(--coral); font-size: 10px; }

/* --- Offer / ask checklists --- */
.offer-section {
    padding: 96px clamp(24px, 7vw, 112px);
    background: var(--navy-deep);
    color: #fff;
}

.offer-section .section-heading h2 { color: #fff; }
.offer-section .section-intro { color: #c2d2d5; }

.offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 960px;
    margin: 0 auto;
}

.offer-card {
    background: var(--navy);
    padding: 30px 27px;
    border-top: 3px solid var(--coral);
}

.offer-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.03em; margin: 0 0 18px; color: #fff; }
.offer-card ul { display: flex; flex-direction: column; gap: 11px; }
.offer-card li { display: flex; gap: 11px; align-items: baseline; font-size: 13px; color: #dce5e3; line-height: 1.55; }
.offer-card li i { color: var(--coral); font-size: 11px; flex-shrink: 0; }

@media (max-width: 1024px) { .roles-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .offer-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .roles-section, .offer-section { padding: 72px 20px; } }

/* --- CV email line under the pitch points --- */
.cta-zone__email {
    margin-top: 26px;
    padding: 14px 16px;
    border-left: 2px solid var(--coral);
    background: rgba(255, 255, 255, 0.05);
    color: #dce5e3;
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
}

.cta-zone__email a {
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid var(--coral);
    word-break: break-all;
}

.cta-zone__email a:hover { color: var(--coral); }