/**
 * Home Hero Banner — element stylesheet (loaded on demand by fame_pe_style()).
 *
 * Ported from the live site's hero (Areas/Landing/assets/css/fame-pages.css,
 * the `.fame .hero` block) and re-scoped to `.fame-el-home-hero`, so nothing
 * here can reach the theme. Class names are element-prefixed for the same
 * reason — `.btn`, `.badge` and `.container` all belong to Bootstrap here.
 * The only bare names kept are `.grad` / `.blink`, because those live inside
 * the heading HTML the editor types in the settings panel.
 */

.fame-el-home-hero {
    --fame-hh-ink: #0d1b3e;
    --fame-hh-ink-soft: #54608a;
    --fame-hh-line: #e7e9f6;
    --fame-hh-indigo: #0063E3;
    --fame-hh-indigo-deep: #0063E3;
    --fame-hh-mint: #0ea5a4;

    position: relative;
    overflow: hidden;
    padding: 50px 0 20px;
    color: var(--fame-hh-ink);
}
.fame-el-home-hero img { max-width: 100%; display: block; }

.fame-el-home-hero .fame-hh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
.fame-hh-copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* Second column only exists while an image is set. */
.fame-el-home-hero.has-media .fame-hh-grid { grid-template-columns: 1.1fr .9fr; }

/* ---- Pill ---- */
.fame-el-home-hero .fame-hh-pill { margin: 0; }
.fame-el-home-hero .fame-hh-pill span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fame-hh-indigo-deep);
    background-color: #ffffff;
    border: 1px solid #dfe2ff;
    padding: 8px 14px;
    border-radius: 999px;
}

/* ---- Heading ---- */
.fame-el-home-hero .fame-hh-title {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--fame-hh-ink);
}
.fame-el-home-hero .fame-hh-title .grad { color: var(--fame-hh-indigo); }
.fame-el-home-hero .fame-hh-title .blink {
    color: #dc2626;
    animation: fame-hh-blink 1s steps(1) infinite;
}
@keyframes fame-hh-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .fame-el-home-hero .fame-hh-title .blink { animation: none; }
}

/* ---- Sub line ---- */
.fame-el-home-hero .fame-hh-sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fame-hh-ink-soft);
    max-width: 540px;
}

/* ---- Exam chips (one per ticked tag detail page) ---- */
.fame-el-home-hero .fame-hh-exams {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fame-el-home-hero .fame-hh-exams a { text-decoration: none; color: inherit; }
.fame-el-home-hero .fame-hh-exams a:hover,
.fame-el-home-hero .fame-hh-exams a:focus { text-decoration: none; color: inherit; }
.fame-el-home-hero .fame-hh-exams span {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fame-hh-ink);
    background: #fff;
    border: 1px solid var(--fame-hh-line);
    padding: 6px 11px;
    border-radius: 8px;
    transition: background .25s, color .25s;
}
.fame-el-home-hero .fame-hh-exams li:hover span {
    background-color: var(--fame-hh-indigo);
    color: #ffffff;
}

/* ---- Quick links ---- */
.fame-el-home-hero .fame-hh-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}
.fame-el-home-hero .fame-hh-quicklinks a {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    transition: transform .2s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.fame-el-home-hero .fame-hh-quicklinks a svg { width: 16px; height: 16px; flex-shrink: 0; }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql1 { background: #eef0ff; color: var(--fame-hh-indigo); border-color: #dfe2ff; }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql1:hover { background: var(--fame-hh-indigo); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(82, 95, 225, .7); }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql2 { background: #e6fbfa; color: var(--fame-hh-mint); border-color: #c9f3f1; }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql2:hover { background: var(--fame-hh-mint); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(14, 165, 164, .7); }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql3 { background: #fff5e3; color: #d97706; border-color: #ffe7bd; }
.fame-el-home-hero .fame-hh-quicklinks a.fame-hh-ql3:hover { background: #f59e0b; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(245, 158, 11, .7); }

/* ---- Optional image column (the live hero-card frame, photo only) ---- */
.fame-el-home-hero .fame-hh-media {
    background: #fff;
    border: 1px solid var(--fame-hh-line);
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 30px 60px -28px rgba(13, 27, 62, .4);
}
.fame-el-home-hero .fame-hh-photo {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #eef0ff;
    aspect-ratio: 4 / 5;
    width: 100%;
}
.fame-el-home-hero .fame-hh-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Responsive (same breakpoints as the live hero) ---- */
@media (max-width: 980px) {
    .fame-el-home-hero { padding: 56px 0 48px; }
    .fame-el-home-hero.has-media .fame-hh-grid { grid-template-columns: 1fr; gap: 36px; }
    .fame-el-home-hero .fame-hh-media { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (max-width: 680px) {
    .fame-el-home-hero { padding: 44px 0 36px; }
    .fame-el-home-hero .fame-hh-pill span { font-size: 12px; padding: 7px 12px; }
    .fame-el-home-hero .fame-hh-title { margin-top: 16px; }
    .fame-el-home-hero .fame-hh-sub { font-size: 15px; margin-top: 14px; }
    .fame-el-home-hero .fame-hh-exams { gap: 6px; margin-top: 18px; }
    .fame-el-home-hero .fame-hh-exams span { font-size: 11.5px; padding: 5px 9px; }
    .fame-el-home-hero .fame-hh-quicklinks { gap: 8px; }
    .fame-el-home-hero .fame-hh-quicklinks a { font-size: 13px; padding: 10px 14px; width: 100%; }
    .fame-el-home-hero .fame-hh-media { padding: 14px; }
}
@media (max-width: 420px) {
    .fame-el-home-hero { padding: 36px 0 28px; }
    .fame-el-home-hero .fame-hh-media { border-radius: 20px; padding: 12px; }
    .fame-el-home-hero .fame-hh-photo { border-radius: 14px; }
    .fame-el-home-hero .fame-hh-quicklinks a { font-size: 12.5px; padding: 10px 12px; }
}