/* ============================================================
   InstaTuition — Interior Page Styles
   /learn/instatuition/assets/css/insta-pages.css
   Covers: pricing, tutoring (sea/csec/cape), contact, about, video
   Depends on insta-global.css tokens + components.
   ============================================================ */

/* ── Page hero ──────────────────────────────────────────────── */
.ip-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    background:
        radial-gradient(800px 360px at 15% -20%, rgba(46, 230, 197, 0.14), transparent 60%),
        radial-gradient(600px 320px at 95% 0%, rgba(212, 175, 55, 0.08), transparent 55%);
}
.ip-hero--sm { padding: clamp(2.2rem, 5vw, 3.5rem) 0; }
.ip-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 900;
    color: var(--white); line-height: 1.08; margin: var(--space-2) 0 var(--space-4);
}
.ip-hero-sub {
    font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.6;
    color: rgba(245, 245, 245, 0.72); max-width: 640px; margin: 0 0 var(--space-5);
}
.ip-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ip-hero-actions--center { justify-content: center; }

/* ── FIA papers ─────────────────────────────────────────────── */
.ip-fia-level-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--insta-teal); margin: var(--space-6) 0 var(--space-4); }
.ip-fia-level-title:first-of-type { margin-top: 0; }
.ip-fia-paper {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--insta-card); border: 1px solid var(--insta-border);
    border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
}
.ip-fia-code {
    font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
    color: var(--black); background: var(--insta-teal);
    padding: 4px 10px; border-radius: 8px; flex-shrink: 0;
}
.ip-fia-name { font-family: var(--font-body); font-size: 0.92rem; color: var(--white); }
.ip-fia-note { margin-top: var(--space-6); font-family: var(--font-body); font-size: 0.9rem; color: rgba(245, 245, 245, 0.65); display: flex; align-items: center; gap: var(--space-2); }
.ip-fia-note i { color: var(--insta-teal); }
.ip-fia-note a { color: var(--insta-teal); }
.ip-hero-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--black); background: var(--insta-teal);
    padding: 4px 12px; border-radius: 20px;
}
/* Per-level hero tints */
.ip-hero--sea  { background: radial-gradient(800px 360px at 15% -20%, rgba(46, 230, 197, 0.16), transparent 60%); }
.ip-hero--csec { background: radial-gradient(800px 360px at 15% -20%, rgba(0, 71, 171, 0.18), transparent 60%); }
.ip-hero--cape { background: radial-gradient(800px 360px at 15% -20%, rgba(212, 175, 55, 0.14), transparent 60%); }

/* ── Section head ───────────────────────────────────────────── */
.ip-section-head { margin-bottom: var(--space-7); }

/* ── Level head (pricing) ───────────────────────────────────── */
.ip-level-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.ip-level-icon {
    width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(46, 230, 197, 0.12); color: var(--insta-teal); font-size: 1.5rem;
}
.ip-level-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--white); margin: 0; }
.ip-level-blurb { font-family: var(--font-body); font-size: 0.92rem; color: rgba(245, 245, 245, 0.6); margin: 4px 0 0; }

/* ── Price grid (shared with home, scoped tweaks) ───────────── */
.ip-price-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.ip-price-card { position: relative; display: flex; flex-direction: column; }
.ip-price-card--flagship { border-color: var(--insta-teal); box-shadow: 0 0 0 1px rgba(46, 230, 197, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3); }
.ip-price-card--standalone { background: transparent; }
.ip-flag {
    position: absolute; top: -11px; left: var(--space-5);
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--black); background: var(--insta-teal); padding: 3px 10px; border-radius: 12px;
}
.ip-price-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); margin: 0 0 var(--space-2); }
.ip-price-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 900; color: var(--insta-teal); margin: 0; }
.ip-price-amount span { font-size: 0.9rem; font-weight: 500; color: rgba(245, 245, 245, 0.5); }
.ip-price-note { font-family: var(--font-body); font-size: 0.82rem; color: rgba(245, 245, 245, 0.55); margin: var(--space-1) 0 var(--space-5); }
.ip-price-features { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex: 1; }
.ip-price-features li {
    font-family: var(--font-body); font-size: 0.88rem; color: rgba(245, 245, 245, 0.75);
    display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0;
}
.ip-price-features i { color: var(--insta-teal); margin-top: 3px; }
.ip-price-cta { justify-content: center; }

/* ── Note box ───────────────────────────────────────────────── */
.ip-note { display: flex; align-items: flex-start; gap: var(--space-3); }
.ip-note p { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.55; color: rgba(245, 245, 245, 0.75); margin: 0; }
.ip-note i { color: var(--insta-teal); margin-top: 3px; }
.ip-note a { color: var(--insta-teal); }
.ip-note--center { justify-content: center; text-align: center; }
.ip-note--center i { margin-top: 0; }

/* ── Subjects ───────────────────────────────────────────────── */
.ip-subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.ip-subject {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--insta-card); border: 1px solid var(--insta-border);
    border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
    font-family: var(--font-body); font-size: 0.95rem; color: var(--white);
}
.ip-subject i { color: var(--insta-teal); }

/* ── Steps ──────────────────────────────────────────────────── */
.ip-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ip-step {
    background: var(--insta-card); border: 1px solid var(--insta-border);
    border-radius: var(--radius-md, 12px); padding: var(--space-6);
}
.ip-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--insta-teal); color: var(--black);
    font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; margin-bottom: var(--space-4);
}
.ip-step h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin: 0 0 var(--space-2); }
.ip-step p { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; color: rgba(245, 245, 245, 0.62); margin: 0; }

/* ── Contact ────────────────────────────────────────────────── */
.ip-contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: start; }
.ip-form-card { padding: var(--space-7); }
.ip-form-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: 0 0 var(--space-5); }
.ip-field { margin-bottom: var(--space-5); }
.ip-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ip-field label { display: block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: rgba(245, 245, 245, 0.8); margin-bottom: var(--space-2); }
.ip-field label span { color: var(--insta-teal); }
.ip-field input,
.ip-field select,
.ip-field textarea {
    width: 100%; box-sizing: border-box;
    background: var(--insta-bg); border: 1px solid var(--insta-border);
    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
    font-family: var(--font-body); font-size: 0.95rem; color: var(--white);
    transition: border-color var(--transition-base, 0.2s);
}
.ip-field input:focus,
.ip-field select:focus,
.ip-field textarea:focus { outline: none; border-color: var(--insta-teal); }
.ip-field textarea { resize: vertical; }
.ip-field select option { background: var(--insta-bg); color: var(--white); }
.ip-form-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }

.ip-contact-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.ip-aside-card { padding: var(--space-5); }
.ip-aside-card h3 { font-family: var(--font-display); font-size: 1rem; color: var(--white); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.ip-aside-card h3 i { color: var(--insta-teal); }
.ip-aside-card p { font-family: var(--font-body); font-size: 0.9rem; color: rgba(245, 245, 245, 0.7); margin: 0; }
.ip-aside-card a { color: var(--insta-teal); }
.ip-aside-card--accent { background: linear-gradient(160deg, rgba(46, 230, 197, 0.1), rgba(212, 175, 55, 0.05)); border-color: rgba(46, 230, 197, 0.3); }

/* ── About / prose ──────────────────────────────────────────── */
.ip-prose { max-width: 760px; }
.ip-prose h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--white); margin: var(--space-7) 0 var(--space-3); }
.ip-prose h2:first-child { margin-top: 0; }
.ip-prose p { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: rgba(245, 245, 245, 0.75); margin: 0 0 var(--space-4); }
.ip-prose a { color: var(--insta-teal); }
.ip-prose-list { list-style: none; padding: 0; margin: 0; }
.ip-prose-list li { font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: rgba(245, 245, 245, 0.75); padding: var(--space-2) 0 var(--space-2) var(--space-6); position: relative; }
.ip-prose-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--insta-teal); position: absolute; left: 0; top: var(--space-2); font-size: 0.8rem; }
.ip-prose-list a { color: var(--insta-teal); }

.ip-leader { display: flex; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-6); }
.ip-leader-avatar {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(46, 230, 197, 0.14); color: var(--insta-teal); font-size: 1.8rem;
}
.ip-leader-body h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); margin: 0; }
.ip-leader-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--insta-teal); margin: 4px 0 var(--space-3); }
.ip-leader-body p { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6; color: rgba(245, 245, 245, 0.72); margin: 0; }

/* ── Family grid ────────────────────────────────────────────── */
.ip-family { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.ip-family-item { padding: var(--space-5); text-align: center; }
.ip-family-item strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin-bottom: 4px; }
.ip-family-item span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(245, 245, 245, 0.5); }

/* ── Video tracks ───────────────────────────────────────────── */
.ip-track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ip-track { text-align: left; }
.ip-track-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(212, 175, 55, 0.14); color: var(--insta-gold); font-size: 1.4rem; margin-bottom: var(--space-4);
}
.ip-track h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); margin: 0 0 var(--space-2); }
.ip-track p { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: rgba(245, 245, 245, 0.62); margin: 0; }

/* ── CTA (shared with home) ─────────────────────────────────── */
.ip-cta { padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; background: linear-gradient(120deg, rgba(46, 230, 197, 0.12), rgba(212, 175, 55, 0.1)); border-top: 1px solid var(--insta-border); }
.ip-cta-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--white); margin: 0 0 var(--space-3); }
.ip-cta-sub { font-family: var(--font-body); font-size: 1.02rem; color: rgba(245, 245, 245, 0.7); margin: 0 0 var(--space-6); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
    .ip-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .ip-steps { grid-template-columns: repeat(2, 1fr); }
    .ip-track-grid { grid-template-columns: repeat(2, 1fr); }
    .ip-contact-grid { grid-template-columns: 1fr; }
    .ip-family { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ip-steps { grid-template-columns: 1fr; }
    .ip-track-grid { grid-template-columns: 1fr; }
    .ip-field-row { grid-template-columns: 1fr; }
    .ip-family { grid-template-columns: 1fr; }
    .ip-leader { flex-direction: column; }
    .ip-hero-actions { flex-direction: column; align-items: stretch; }
    .ip-hero-actions .insta-btn { justify-content: center; }
}