/*
V7-HEADER
* Title:    Buktika - MamaDEX Mamas Page Styles
* Filename: assets/css/mamadex/mamadex-mamas.css
* Version:  v2.9.0
* Issued:   2026-03-27
* Updated:  2026-06-13 (mobile hero height 520->600px so the map reads as a proper map, not a thumbnail)
* Author:   Buktika Webdesk (Binka)
* Owner:    Buktika — Binka
* Purpose:  Page styles for mamadex-mamas.html.
*           - Page variable binding (MamaDEX palette per Colour Map §5.3).
*           - All-Mamas grid: 2-column layout, mama-card component.
*           - Focus highlight state (mama-focus) for slug deep links.
*           - Featured Mama block retained (scoped) for future use.
*           - Dark mode overrides.
* Type:     CSS stylesheet
* Colour Map:    v3.9.0 Section 5.3 (LOCKED)
* Design System: v4.0.0
* ISO Reference: ISO 27001, ISO 9241-110
* Source Naming Standard: Buktika v7.1 (ISO Aligned)
* License:  © Buktika, 2026. All rights reserved.
*
* Palette (Colour Map v3.9.0 §5.3 — MamaDEX):
*   --page-primary:   --sdx-color-mama-earth  #8b3a1a
*   --page-secondary: --sdx-color-mama-depth  #220f27
*   --page-accent:    --sdx-color-mama-amber  #f5b014
*   --page-depth:     --sdx-color-stem-olive  #464820
*
*/

/* 0) depends on: global.css, themes.css, partials/header.css, partials/footer.css */

/* ======================================================================================================
   1) Page variable binding
   Colour Map v3.9.0 Section 5.3 — MamaDEX locked palette.
   ====================================================================================================== */

.page-mamadex-mamas {
  --page-bg:            var(--sdx-color-mama-bg);
  --page-primary:       var(--sdx-color-mama-violet);
  --page-secondary:     var(--sdx-color-mama-depth);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-mama-dark-base);
  --page-dark-surface:  var(--sdx-color-mama-dark-surface);

  /* No hero image on this page — map partial provides the hero surface */
  --hero-image:         none;
  --hero-vignette-from: rgba(139, 92, 246, 0.20);
  --hero-vignette-to:   rgba(139, 92, 246, 0);

  scroll-behavior: smooth;
}

/* ======================================================================================================
   2) Base page surfaces
   ====================================================================================================== */

.page-mamadex-mamas {
  background: var(--page-bg);
  color: var(--fg);
}

/* ======================================================================================================
   3) Hero
   .hero-mamadex-map is the hero band for this page — a full-width map section.
   Geometry (height, gradient, flex alignment, responsive breakpoints) is owned here
   per §4.1 scaffold. Partial-internal rules (#map-container, pins, Tippy) live in
   mamadex-mamas-map.css.
   ====================================================================================================== */

/* Host .hero-wrap: height here, not on inner .hero-mamadex-map. overflow:hidden constrains. */
.page-mamadex-mamas #mamadex-mamas-map-section {
  min-height: var(--hero-min, 1000px); /* EXCEPTION: px via token — §15.2 */
  height: var(--hero-min, 1000px);     /* Required: inner height:100% only resolves on definite height */
}

/* Inner section — gradient, colour, flex. No height set here. */
.page-mamadex-mamas .hero-mamadex-map {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hero gradient: teal-deep → green-soft → dark forest.
     EXCEPTION: #234038 — photography-derived gradient end stop. No token. */
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.02) 44%,
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(
      135deg,
      var(--sdx-color-teal-deep) 0%,
      var(--sdx-color-green-soft) 42%,
      #234038 100%               /* EXCEPTION: photography-derived stop, no token */
    );

  color: #ffffff;                  /* EXCEPTION: hero text always white — global.css v3.3.0 */
  font-family: var(--text-font);
  --sa-outline-color: #9fb3a2;     /* SVG outline — decorative. Permanent exception. */
}

/* Logo pattern overlay (subtle) */
.page-mamadex-mamas .hero-mamadex-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/mamadex/mamadex-logo.webp');
  background-size: 100px 100px;    /* EXCEPTION: fixed asset dimension §15.4 */
  background-repeat: repeat;
  background-position: center;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Radial vignette — darkens edges, draws eye inward to map */
.page-mamadex-mamas .hero-mamadex-map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 50%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.28) 100%);
}

/* ======================================================================================================
   4) Typography overrides
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   5) Sections and alternation
   .sdx-card-section geometry is canonical (global.css). No overrides needed.
   Width is constrained by .container (max-width: 1200px) in the HTML.
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   6) Cards and tiles
   ====================================================================================================== */

/* Section header inside the All Mamas card section */
.page-mamadex-mamas .mamas-list-header {
  display: block;                  /* Explicit block — <header> can inherit flex from parent in some browsers */
  text-align: left;
  margin: 0 0 1.375rem;            /* 22px */
}

.page-mamadex-mamas .mamas-list-header h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);   /* 22px → 26px */
  margin: 0 0 0.25rem;
}

.page-mamadex-mamas .mamas-list-header .intro {
  margin: 0;
  font-size: var(--body);
  color: var(--muted);
}

/* All-Mamas grid — 2 columns on wide, 1 on narrow */
.page-mamadex-mamas .mamas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.875rem;            /* 24px 30px */
}

@media (max-width: 1200px) {
  .page-mamadex-mamas .mamas-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mama card */
.page-mamadex-mamas .mama-card {
  display: block;
  background: var(--card);
  border-radius: 1.25rem;          /* 20px */
  padding: 1.125rem 1.125rem 1.25rem;  /* 18px 18px 20px */
  border: 1px solid rgba(211, 196, 170, 0.55);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.06);

  /* Scroll offset — scrollIntoView(block:'start') from map pin click
     anchors the card flush to the viewport top. scroll-margin-top
     pushes the snap point below the fixed header (3.5rem) plus
     breathing room (1.5rem). */
  scroll-margin-top: 5rem;
}

.page-mamadex-mamas .mama-card-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.125rem;                   /* 18px */
  text-decoration: none;
  color: inherit;
}

.page-mamadex-mamas .mama-card-copy {
  flex: 1 1 auto;
}

.page-mamadex-mamas .mama-card-name {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;            /* 17px */
  font-weight: 600;
  color: var(--fg);
}

.page-mamadex-mamas .mama-card-base,
.page-mamadex-mamas .mama-card-centre,
.page-mamadex-mamas .mama-card-location {
  margin: 0;
  line-height: 1.5;
  font-size: var(--body);
  color: var(--muted);
}

.page-mamadex-mamas .mama-card-bio {
  margin: 0.25rem 0 0;
  line-height: 1.5;
  font-size: var(--body);
  color: var(--muted);
}

.page-mamadex-mamas .mama-card-thumb {
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-mamadex-mamas .mama-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.875rem;         /* 14px */
}

@media (max-width: 800px) {
  .page-mamadex-mamas .mama-card-main {
    flex-direction: column-reverse;
    gap: 0.875rem;                 /* 14px */
  }

  .page-mamadex-mamas .mama-card-thumb {
    flex: 0 0 auto;
    max-width: 100%;
    justify-content: flex-start;
  }

  .page-mamadex-mamas .mama-card {
    padding: 1rem 0.875rem 1.125rem;  /* 16px 14px 18px */
  }
}

/* Focus state — triggered by slug deep link from slider or map pin.
   Glow uses mama-amber (--page-accent) rgba tint. */
.page-mamadex-mamas .mama-card.mama-focus {
  box-shadow:
    0 0 0 3px rgba(245, 176, 20, 0.30),    /* mama-amber inner ring */
    0 0 30px rgba(245, 176, 20, 0.40),     /* mama-amber outer glow */
    0 14px 30px rgba(15, 23, 42, 0.16),
    0 1px 2px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ======================================================================================================
   7) Buttons and CTAs
   CTA band uses sdx-btn-primary from global.css.
   Override gradient to MamaDEX canonical: earth → depth (§5.3).
   ====================================================================================================== */

.page-mamadex-mamas .sdx-cta-band .sdx-btn-primary {
  background: linear-gradient(135deg, var(--page-primary) 0%, var(--page-secondary) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.page-mamadex-mamas .sdx-cta-band .sdx-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.50),
              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ======================================================================================================
   8) Page modules
   Featured Mama block (.mamas-block, .mama-focus-shell) — removed pending HTML build.
   Restore from v2.2.0 when Featured Mama section is reinstated.
   ====================================================================================================== */

/* none */

/* ======================================================================================================
   9) Media queries
   ====================================================================================================== */

/* Hero host heights — §15.2 px permitted. Target: host div, not inner .hero-mamadex-map. */
@media (min-width: 2560px)                         { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 1100px; height: 1100px; } }
@media (min-width: 1920px) and (max-width: 2559px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 1000px; height: 1000px; } }
@media (min-width: 1680px) and (max-width: 1919px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 920px;  height: 920px;  } }
@media (min-width: 1280px) and (max-width: 1679px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 860px;  height: 860px;  } }
@media (min-width: 968px)  and (max-width: 1279px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 760px;  height: 760px;  } }
@media (min-width: 768px)  and (max-width:  967px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 680px;  height: 680px;  } }
@media (min-width: 641px)  and (max-width:  767px) { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 600px;  height: 600px;  } }
@media (max-width: 640px)                          { .page-mamadex-mamas #mamadex-mamas-map-section { min-height: 600px;  height: 600px;  } }

@media (max-width: 640px) {
  .page-mamadex-mamas .mamas-block,
  .page-mamadex-mamas .mamas-list-section {
    padding: 1.25rem 1.125rem 1.5rem;  /* 20px 18px 24px */
  }
}

/* ======================================================================================================
   10) Dark mode
   ====================================================================================================== */

[data-theme="dark"] .page-mamadex-mamas {
  background: var(--page-dark-base);
  color: var(--sdx-color-ui-dark-text);
}

[data-theme="dark"] .page-mamadex-mamas .mama-card {
  background: var(--page-dark-surface);
  border-color: rgba(245, 176, 20, 0.12);
}