/* ==========================================================================
   Plymouth Dance Centre — wedding-dance.css
   Loads AFTER dance-classes.css (hero/strip/FAQ/steps reused) and adds the
   wedding-only pieces: package grid, style cards, travel note, quotes.
   ========================================================================== */

.packages-section {
    padding: 96px clamp(24px, 7vw, 112px);
    background: var(--sand);
}

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

.package-card {
    background: var(--paper);
    padding: 26px 24px;
    border-top: 3px solid var(--coral);
    display: flex;
    flex-direction: column;
}

.package-card--featured {
    background: var(--navy);
    color: #fff;
}

.package-card__label {
    color: #4a5c63;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
}

.package-card--featured .package-card__label { color: #b3c7cb; }

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

.package-card--featured h3 { color: #fff; }

.package-card__price {
    font-family: var(--serif);
    font-size: 40px;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--coral);
    margin: 6px 0 12px;
}

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

.package-card--featured p { color: #cedbdd; }

/* --- Styles you can choose --- */
.styles-choice {
    padding: 96px clamp(24px, 7vw, 112px);
}

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

.style-card {
    background: var(--sand);
    padding: 27px;
    min-height: 200px;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), background 0.25s ease;
}

.style-card:hover { transform: translateY(-5px); background: #ece8dd; }

.style-card__number { color: var(--coral-ink); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.style-card h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 25px; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 10px; }
.style-card p { font-size: 13px; color: #52626a; line-height: 1.6; margin: 0; }

/* --- Travel / where we teach --- */
.travel-section {
    padding: 100px clamp(24px, 8vw, 128px);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(35px, 6vw, 90px);
    background: var(--mist);
    align-items: center;
}

.travel-section h2 { font-size: clamp(42px, 5vw, 68px); margin-bottom: 27px; }
.travel-section p:not(.eyebrow) { max-width: 470px; line-height: 1.8; color: #516269; }
.travel-section .signal-bar { margin-top: 31px; max-width: 470px; }

.travel-cards { display: flex; flex-direction: column; gap: 15px; }
.travel-card { background: var(--paper); padding: 24px 27px; border-left: 3px solid var(--coral); }
.travel-card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.03em; margin: 0 0 9px; color: var(--ink); }
.travel-card p { color: #4a5c63; font-size: 13px; line-height: 1.65; margin: 0; }

/* --- Quotes --- */
.quotes-section { padding: 100px clamp(24px, 7vw, 112px); background: var(--navy-deep); color: #fff; }
.quotes-section .section-heading h2 { color: #fff; }
.quotes-section .section-intro { color: #c2d2d5; }
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: var(--container); margin: 0 auto; }
.quote-card { background: var(--navy); padding: 30px 27px; border-top: 3px solid var(--coral); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.quote-card blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; color: #e8f0ef; }
.quote-card figcaption { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--coral); }
.quote-card figcaption span { color: #8aa1a6; display: block; margin-top: 4px; }

@media (max-width: 1024px) {
    .styles-choice__grid { grid-template-columns: repeat(2, 1fr); }
    .quotes-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .travel-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .packages-section, .styles-choice, .quotes-section { padding: 72px 20px; }
    .styles-choice__grid, .quotes-grid { grid-template-columns: 1fr; }
    .travel-section { display: block; padding: 68px 24px; }
    .travel-cards { margin-top: 35px; }
}