/* ==========================================================================
   Intro + Note Section
   Layout: intro_note
   Ported from HTML/families.html lines 300-307, 394-408 (.fp-intro / .fp-note).
   rem values converted to px at a 16px base.
   ========================================================================== */

.intro-note-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: center;
}

.intro-note .eyebrow {
    display: block;
    margin-bottom: 10px;
}

.intro-note-heading {
    margin: 0 0 14px;
}

.intro-note-body p {
    color: #4a4f57;
    font-size: var(--font-size-20px);
    line-height: 1.55;
    margin: 0 0 14px;
}
.intro-note-body p:last-child {
    margin-bottom: 0;
}

.intro-note-card {
    border: 1px solid #e7ecf3;
    border-radius: var(--radius);
    padding: 30px 35px;
}
.intro-note-card-green {
    background: linear-gradient(160deg, var(--color-white), var(--color-green-soft));
}
.intro-note-card-light {
    background: linear-gradient(160deg, var(--color-white), var(--color-blue-soft));
}

.intro-note-ico {
    width: 62.4px;
    height: 62.4px;
    border-radius: 13px;
    color: var(--color-white);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    font-size: 26px; /* Sizes Font Awesome <i> icons */
    line-height: 1;
}
.intro-note-card-green .intro-note-ico {
    background: var(--color-green);
}
.intro-note-card-light .intro-note-ico {
    background: var(--color-blue);
}
.intro-note-ico svg {
    width: 31.2px;
    height: 31.2px; /* Applies to both preset SVGs and Lucide-rendered SVGs */
}

.intro-note-card-heading {
    color: var(--color-blue-deep);
    font-size: 22.5px;
    line-height: 1.3;
    margin: 0 0 8px;
    font-weight: 800;
}

.intro-note-card-body {
    color: #4a4f57;
    font-size: var(--font-size-18px);
    line-height: 1.55;
    margin: 0;
}
.intro-note-card-body a {
    color: #4a4f57;
}
.intro-note-card-body a:hover {
    color: var(--color-primary);
}

/* Full Width layout: both columns stack full-width at every viewport. Copy
   block sits above the note card, both spanning the container. */
.intro-note-layout-full .intro-note-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .intro-note-card{
        padding: 35px;
    }
    .intro-note-card-heading{
        font-size: 20px;
    }
}

@media (max-width: 880px) {
    .intro-note-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 780px) {
    .intro-note-card{
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .intro-note-card{
        padding: 25px 20px;
    }
}