/* Legacy breadcrumb rules removed. Breadcrumb source of truth: /components/breadcrumb/breadcrumb.css?v=20260710-v6118-31-short-hero-all-devices */
.content-area * { box-sizing: border-box; }

.content-area a { text-decoration: none; color: inherit; }

.content-area a:focus-visible { outline: 3px solid var(--p1-accent); outline-offset: 3px; }

.content-area{
    --p1-bg-soft:#eefcf4;
    --p1-bd-soft:rgba(76,175,80,.22);
    --p1-surface:#ffffff;
    --p1-card-bd:#e9ecef;
    --p1-accent:var(--color-pri, #4CAF50);
    --p1-accent-500:var(--color-pri, #4CAF50);
    --p1-accent-700:#388e3c;
    --p1-txt-900:#1b263b;
    --p1-txt-700:#334155;
    --p1-subtle-ink:#6c757d;
    --p1-radius-lg:14px;
    --p1-radius-md:12px;
    --p1-radius-sm:10px;
    --p1-shadow-accent:0 8px 18px rgba(76,175,80,.14), 0 0 0 3px rgba(76,175,80,.10);
    --p1-card-min-h:110px;
    --p1-grid-gap:24px;
    --p1-grid-cols:2;
    --p1-icon-size:56px;
    --p1-icon-radius:12px;
    --p1-hover-sheet:linear-gradient(180deg, rgba(76,175,80,.06), transparent 60%);
  }

html.dark-mode .content-area,
  body.dark-mode .content-area{
    --p1-bg-soft:rgba(76,175,80,.10);
    --p1-bd-soft:rgba(76,175,80,.28);
    --p1-surface:rgba(255,255,255,.04);
    --p1-card-bd:rgba(255,255,255,.12);
    --p1-accent:#44e680;
    --p1-accent-500:#44e680;
    --p1-accent-700:#2e7d32;
    --p1-txt-900:#e5e7eb;
    --p1-txt-700:#cbd5e1;
    --p1-subtle-ink:#94a3b8;
    --p1-hover-sheet:rgba(255,255,255,.06);
  }

.content-area .sp-hero{
    position:relative;
    background:linear-gradient(135deg, #4CAF50 0%, #388e3c 100%);
    border:none;
    border-radius:14px;
    padding:14px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-bottom:20px;
    text-align:center;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(76,175,80,0.22);
    z-index:1;
  }

.content-area .sp-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 70%);
    pointer-events:none;
    z-index:-1;
  }

html.dark-mode .content-area .sp-hero,
  body.dark-mode .content-area .sp-hero{
    background:linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border:1px solid rgba(76,175,80,0.3);
    box-shadow:0 6px 15px rgba(0,0,0,0.3);
  }

.content-area .sp-hero h2{
    position:relative;
    z-index:1;
    margin:0;
    font-size:1.3rem;
    line-height:1.2;
    color:#ffffff;
    font-weight:800;
    text-shadow:0 1px 3px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

.content-area .sp-hero p{
    position:relative;
    z-index:1;
    margin:0;
    width:100%; max-width:none;
    font-size:0.9rem;
    line-height:1.4;
    color:rgba(255,255,255,.95);
    font-weight:500;
  }

@media (min-width:768px) {
.content-area .sp-hero{ padding:20px 24px; gap:8px; margin-bottom:26px; border-radius:16px; }
.content-area .sp-hero h2{ font-size:1.6rem; }
.content-area .sp-hero p{ font-size:1.05rem; }
}

.content-area .subjects-grid{
    display:grid;
    grid-template-columns:repeat(var(--p1-grid-cols), minmax(0, 1fr));
    gap:var(--p1-grid-gap);
    margin:0;
  }

@media (max-width: 860px) {
.content-area .subjects-grid{ --p1-grid-cols:1; }
}

.content-area .subject-card{
    position:relative;
    min-height:var(--p1-card-min-h);
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    gap:4px 16px;
    padding:16px 20px;
    border-radius:18px;
    border:1px solid var(--p1-card-bd);
    background:var(--p1-surface);
    overflow:hidden;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

.content-area .subject-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:8px;
    background:linear-gradient(90deg, var(--p1-accent), var(--p1-accent-700));
    border-top-left-radius:inherit;
    border-top-right-radius:inherit;
  }

.content-area .subject-card:hover,
  .content-area .subject-card:focus-visible{
    transform:translateY(-3px);
    border-color:var(--p1-accent);
    box-shadow:var(--p1-shadow-accent);
    background:var(--p1-hover-sheet);
  }

html.dark-mode .content-area .subject-card:hover,
  body.dark-mode .content-area .subject-card:hover{
    background:rgba(255,255,255,.08);
  }

.content-area .subj-icon{
    grid-column:1;
    grid-row:1 / span 2;
    width:var(--p1-icon-size);
    height:var(--p1-icon-size);
    border-radius:var(--p1-icon-radius);
    background:linear-gradient(135deg, var(--p1-accent), var(--p1-accent-700));
    color:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 8px 18px rgba(76,175,80,.18);
  }

.content-area .subj-icon i{
    font-size:26px;
    line-height:1;
    transition:transform .2s ease;
  }

.content-area .subject-card:hover .subj-icon i{ transform:scale(1.06); }

.content-area .subj-title{
    grid-column:2;
    grid-row:1;
    margin:0;
    color:var(--p1-txt-900);
    font-size:1.18rem;
    line-height:1.25;
    font-weight:800;
  }

.content-area .subj-desc{
    grid-column:2;
    grid-row:2;
    margin:0;
    color:var(--p1-subtle-ink) !important;
    font-size:1rem;
    line-height:1.45;
    font-weight:500;
  }

@media (max-width: 560px) {
.content-area .subject-card{ padding:14px 16px; }
.content-area .subj-title{ font-size:1.08rem; }
.content-area .subj-desc{ font-size:.94rem; }
}

.content-area,
.content-area .subjects-grid,
.content-area .subject-card,
.content-area .subj-title,
.content-area .subj-desc { min-width: 0; }

.content-area .subj-title,
.content-area .subj-desc {
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: pretty;
}

@media (max-width: 420px) {
.content-area .subjects-grid { gap: 9px; }
.content-area .subject-card { padding-inline: 7px; }
.content-area .subj-title { font-size: clamp(.80rem, 3.8vw, .95rem); }
.content-area .subj-desc { font-size: clamp(.66rem, 3.1vw, .75rem); }
}