/* ======================================================================================================
 * Version: v3.3.0
 * Created: 2026-03-05 00h00 SAST
 * Updated: 2026-03-27 00h00 SAST
 * File: mamadex-mama-profile-hero.css
 * Path: assets/css/mamadex/partials/mamadex-mama-profile-hero.css
 * Author: Buktika Webdesk (Binka)
 * Purpose: Hero section partial stylesheet for mamadex-mama-profile.html.
 *          Owns: .hero-wrap sizing, bottom vignette, hero
 *          typography, and hero CTA button gradient override.
 *          Scoped to .page-mamadex-mama-profile throughout.
 *          Section partial — not a full page stylesheet.
 *          DOC-02 §4.1 11-section scaffold applies to page stylesheets only.
 * Type: CSS stylesheet
 * License: © Buktika, 2026. All rights reserved.
 * ISO Reference: ISO 27001, ISO 9241-110
 * Source Naming Standard: Buktika v7.1 (ISO Aligned)
  * ====================================================================================================== */

/* 0) depends on: global.css, themes.css, mamadex-mama-profile.css
      --hero-vignette-from / --hero-vignette-to bound in mamadex-mama-profile.css §1. */

/* ======================================================================================================
   HERO WRAP
   PIL-03 §3. Bottom vignette only. from=rgba(139,58,26,0.20) fade 32%.
   overflow:visible required — backdrop-filter on .btn-hero-secondary needs unclipped context.
   ====================================================================================================== */

.page-mamadex-mama-profile .hero-wrap {
  min-height: clamp(400px, 56vw, 720px); /* px inside clamp() — fixed photographic frame, DOC-02 §15.3 */
  position: relative;
  overflow: visible; /* REQUIRED: global.css overflow:hidden prevents backdrop-filter on .btn-hero-secondary.
                        DOC-03 §4.2 glass needs unclipped backdrop. */
  /* isolation: isolate removed — it created an isolated stacking context for the whole hero,
*/
}

/* Override global.css .hero { min-height: 1000px } — compact profile hero.
   1000px produces ~280px of empty space below buttons on this page. */
.page-mamadex-mama-profile .hero {
  min-height: 0;
}

.page-mamadex-mama-profile .hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--hero-vignette-from) 0%,
    var(--hero-vignette-to)   32%
  );
}

/* ======================================================================================================
   HERO INNER — grid and text column
   .hero-body: position:relative centres text in hero.
   ====================================================================================================== */

.page-mamadex-mama-profile .hero-grid {
  width: min(1160px, 92vw); /* verbatim from mamadex.css */
  margin-inline: auto;
}

.page-mamadex-mama-profile .hero-body {
  text-align: center;
  padding: 1.5rem 0.625rem; /* 24px 10px → rem per DOC-02 §15.2 */
  position: relative;
  z-index: 2;
}

/* ======================================================================================================
   HERO TYPOGRAPHY
   .headline: #ffffff — permanent exception, hero text over photography. global.css v3.3.0.
   .tagline:  global.css canonical rule owns colour/font/shadow. PIL-03 §4 mama-amber.
   ====================================================================================================== */

.page-mamadex-mama-profile .hero .headline {
  margin: 0;
  text-align: center;
  color: #ffffff; /* EXCEPTION: permanent — hero text always white over photography. global.css v3.3.0. */
  font-family: var(--headline-font);
  font-size: clamp(2.625rem, 5.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.5px; /* sub-pixel precision — px permitted per §15.3 spirit */
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.85),
    0 2px 8px  rgba(0, 0, 0, 0.70),
    0 1px 3px  rgba(0, 0, 0, 0.50);
}

/* .tagline — global.css canonical rule owns colour (#f5b014), font, weight, text-shadow.
   PIL-03 §4. No override needed or permitted here. */

/* ======================================================================================================
   HERO CTA BUTTONS
   DOC-03 §8.2.1 HARD RULE: .btn-hero-primary gradient override is MANDATORY on every hero.
   PIL-03 §5.1 gradient: linear-gradient(135deg, #8b5cf6 0%, #220f27 100%) — violet → depth.
   DOC-03 §8.3.1: both stops dark → text MUST be #ffffff.
   HOWTO E2b: button is <a> element — scoped color:#ffffff protects against cascade.
   ====================================================================================================== */

.page-mamadex-mama-profile .hero .btn-hero-primary {
  background: linear-gradient(135deg, var(--sdx-color-mama-violet) 0%, var(--sdx-color-mama-depth) 100%);
  color: #ffffff; /* DOC-03 §8.3.1 + HOWTO E2b — mandatory */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.50),
    0 2px 8px  rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.page-mamadex-mama-profile .hero .btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.60),
    0 3px 10px rgba(0, 0, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30);
  color: #ffffff; /* HOWTO E2b: maintain on hover */
}

/* ======================================================================================================
   HERO CTA ROW
   ====================================================================================================== */

.page-mamadex-mama-profile .hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

@media (max-width: 33.75rem) { /* 540px */
  .page-mamadex-mama-profile .hero .cta {
    flex-direction: column;
    align-items: center;
  }
}