/* =====================================================================
   Schoolep Subject Hero Component — single source of truth

   Level 3 pages use two responsive hero presentations:
   - PC/tablet: full academic level title + complete level description.
   - Mobile: abbreviated level title + concise level description.

   The subject icon and supervised button are shared by both versions.
   Load this component after subject-primary/middle/secondary.css.
   ===================================================================== */

:root {
  /* Responsive boundary */
  --subject-hero-mobile-max-width: 720px;

  /* PC hero box */
  --subject-hero-pc-padding-block: 18px;
  --subject-hero-pc-padding-inline: 22px;
  --subject-hero-pc-gap: 10px;
  --subject-hero-pc-margin-bottom: 18px;
  --subject-hero-pc-border-radius: 20px;

  /* PC title */
  --subject-hero-pc-title-size-fr: clamp(21px, 2vw, 26px);
  --subject-hero-pc-title-size-ar: clamp(21px, 2vw, 26px);
  --subject-hero-pc-title-line-height-fr: 1.22;
  --subject-hero-pc-title-line-height-ar: 1.34;
  --subject-hero-pc-title-weight: 900;
  --subject-hero-pc-icon-title-gap: 10px;

  /* PC description */
  --subject-hero-pc-description-max-width: 1180px;
  --subject-hero-pc-description-size-fr: 15px;
  --subject-hero-pc-description-size-ar: 15px;
  --subject-hero-pc-description-line-height-fr: 1.62;
  --subject-hero-pc-description-line-height-ar: 1.78;
  --subject-hero-pc-description-weight: 500;

  /* Mobile hero box */
  --subject-hero-mobile-padding-block: 10px;
  --subject-hero-mobile-padding-inline: 12px;
  --subject-hero-mobile-gap: 6px;
  --subject-hero-mobile-margin-bottom: 10px;
  --subject-hero-mobile-border-radius: 14px;

  /* Mobile title */
  --subject-hero-mobile-title-size-fr: clamp(15px, 4.25vw, 18px);
  --subject-hero-mobile-title-size-ar: clamp(15px, 4.25vw, 18px);
  --subject-hero-mobile-title-line-height-fr: 1.22;
  --subject-hero-mobile-title-line-height-ar: 1.34;
  --subject-hero-mobile-title-weight: 900;
  --subject-hero-mobile-icon-title-gap: 0.34em;
  --subject-hero-mobile-icon-size: 1.05em;
  --subject-hero-mobile-icon-y: -0.15px;

  /* Mobile description */
  --subject-hero-mobile-description-size-fr: clamp(12px, 3.35vw, 13.5px);
  --subject-hero-mobile-description-size-ar: clamp(12px, 3.45vw, 13.5px);
  --subject-hero-mobile-description-line-height-fr: 1.38;
  --subject-hero-mobile-description-line-height-ar: 1.52;
  --subject-hero-mobile-description-weight: 500;

  /* Supervised button */
  --subject-hero-button-padding-block-pc: 6px;
  --subject-hero-button-padding-inline-pc: 14px;
  --subject-hero-button-padding-block-mobile: 4px;
  --subject-hero-button-padding-inline-mobile: 10px;
  --subject-hero-button-border-width-mobile: 1.5px;
}

/* Device variants */
.content-area .sp-hero .hero-title-pc,
.content-area .sp-hero .hero-desc-pc {
  display: inline;
}

.content-area .sp-hero .hero-title-mobile,
.content-area .sp-hero .hero-desc-mobile {
  display: none;
}

/* PC/tablet hero */
.content-area .sp-hero {
  gap: var(--subject-hero-pc-gap);
  margin-bottom: var(--subject-hero-pc-margin-bottom);
  padding: var(--subject-hero-pc-padding-block) var(--subject-hero-pc-padding-inline);
  border-radius: var(--subject-hero-pc-border-radius);
}

.content-area .sp-hero #page-title {
  gap: var(--subject-hero-pc-icon-title-gap);
  max-width: 100%;
  font-weight: var(--subject-hero-pc-title-weight);
}

html[lang="fr"] .content-area .sp-hero #page-title {
  font-size: var(--subject-hero-pc-title-size-fr);
  line-height: var(--subject-hero-pc-title-line-height-fr);
}

html[lang="ar"] .content-area .sp-hero #page-title {
  font-size: var(--subject-hero-pc-title-size-ar);
  line-height: var(--subject-hero-pc-title-line-height-ar);
}

.content-area .sp-hero #hero-desc {
  width: min(100%, var(--subject-hero-pc-description-max-width));
  margin: 0 auto;
  font-weight: var(--subject-hero-pc-description-weight);
  text-align: center;
}

html[lang="fr"] .content-area .sp-hero #hero-desc {
  font-size: var(--subject-hero-pc-description-size-fr);
  line-height: var(--subject-hero-pc-description-line-height-fr);
}

html[lang="ar"] .content-area .sp-hero #hero-desc {
  font-size: var(--subject-hero-pc-description-size-ar);
  line-height: var(--subject-hero-pc-description-line-height-ar);
}

.content-area .sp-hero .hero-stage-focus {
  font-weight: 800;
}

.content-area .sp-hero .hero-inline-btn {
  margin-inline: 0.22em;
  padding: var(--subject-hero-button-padding-block-pc) var(--subject-hero-button-padding-inline-pc);
}

@media (max-width: 720px) {
  /* Switch device content */
  .content-area .sp-hero .hero-title-pc,
  .content-area .sp-hero .hero-desc-pc {
    display: none;
  }

  .content-area .sp-hero .hero-title-mobile,
  .content-area .sp-hero .hero-desc-mobile {
    display: inline;
  }

  /* Slim mobile hero */
  .content-area .sp-hero {
    display: grid;
    place-items: center;
    gap: var(--subject-hero-mobile-gap);
    min-height: 0;
    margin-bottom: var(--subject-hero-mobile-margin-bottom);
    padding: var(--subject-hero-mobile-padding-block) var(--subject-hero-mobile-padding-inline);
    border-radius: var(--subject-hero-mobile-border-radius);
  }

  /* Icon + short title */
  .content-area .sp-hero #page-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--subject-hero-mobile-icon-title-gap);
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-weight: var(--subject-hero-mobile-title-weight);
    text-align: center;
  }

  html[lang="fr"] .content-area .sp-hero #page-title {
    font-size: var(--subject-hero-mobile-title-size-fr);
    line-height: var(--subject-hero-mobile-title-line-height-fr);
  }

  html[lang="ar"] .content-area .sp-hero #page-title {
    font-size: var(--subject-hero-mobile-title-size-ar);
    line-height: var(--subject-hero-mobile-title-line-height-ar);
  }

  .content-area .sp-hero #page-title > .schoolep-subject-hero-title-icon,
  .content-area .sp-hero #page-title > i {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--subject-hero-mobile-icon-size);
    width: var(--subject-hero-mobile-icon-size);
    height: var(--subject-hero-mobile-icon-size);
    min-width: var(--subject-hero-mobile-icon-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    font-size: var(--subject-hero-mobile-icon-size);
    line-height: 1;
    transform: translateY(var(--subject-hero-mobile-icon-y));
  }

  /* Concise mobile description + supervised button */
  .content-area .sp-hero #hero-desc {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-weight: var(--subject-hero-mobile-description-weight);
    text-align: center;
  }

  html[lang="fr"] .content-area .sp-hero #hero-desc {
    font-size: var(--subject-hero-mobile-description-size-fr);
    line-height: var(--subject-hero-mobile-description-line-height-fr);
  }

  html[lang="ar"] .content-area .sp-hero #hero-desc {
    font-size: var(--subject-hero-mobile-description-size-ar);
    line-height: var(--subject-hero-mobile-description-line-height-ar);
  }

  .content-area .sp-hero .hero-inline-btn {
    margin-inline: 0.18em;
    padding: var(--subject-hero-button-padding-block-mobile) var(--subject-hero-button-padding-inline-mobile);
    border-width: var(--subject-hero-button-border-width-mobile);
    font-size: 0.95em;
    white-space: nowrap;
  }
}