Hero variable system, CSS fallbacks, header cleanup, remove mobile overrides

- Hero card fully variable-driven: --hero-card-bg/color/overlay/border-radius/padding/max-width
- Alternative hero variant: --hero-alt-card-* for secondary theme
- Overlay bg-position and bg-size now customizable via variables
- Mobile breakpoint: photo bg hidden, hero full-bleed on small screens
- Added fallback values to 1365 var() calls in template.css
- .btn --btn-bg changed from transparent to var(--body-bg) in dark/light themes
- .offcanvas-header .btn-close gets background-color from overlay
- Stripped file info headers (@package/DEFGROUP/VERSION) from 48 files, kept copyright/SPDX
- Synced all theme variables across standard and custom templates
- Removed 26 mobile.php layout overrides
- Added *.py to .gitignore, card-border-radius fallback

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/media/css/theme/dark.standard.css

@@ -5,16 +5,6 @@
 
  SPDX-License-Identifier: GPL-3.0-or-later
 
-
-
- # FILE INFORMATION
- DEFGROUP: Joomla.Template.Site
- INGROUP: MokoCassiopeia
- PATH: ./media/templates/site/mokocassiopeia/css/global/dark/colors_standard.css
- VERSION: 03.09.02
- BRIEF: Standard dark mode color definitions for MokoCassiopeia template
- */
-
 /* -----------------------------------------------
  * DARK THEME
  * --------------------------------------------- */
@@ -526,6 +516,8 @@ color-scheme: dark;
 --hero-bg-size: cover;
 --hero-border-bottom: solid var(--accent-color-secondary);
 --hero-overlay-bg: hsla(0, 0%, 0%, 0.3);
+--hero-overlay-bg-position: center;
+--hero-overlay-bg-size: cover;
 --hero-overlay-padding: 1em;
 --hero-overlay-text-align: center;
 --hero-overlay-text-color: var(--body-color);
@@ -541,6 +533,25 @@ color-scheme: dark;
 --hero-secondary-overlay: linear-gradient(rgba(8, 15, 30, .80), rgba(8, 15, 30, .80));
 --hero-secondary-color: #f1f5f9;
 
+/* ===== HERO CARD (inner .hero element) ===== */
+/* Default card — uses primary variant values */
+--hero-card-bg: var(--hero-primary-bg-color);
+--hero-card-color: var(--hero-primary-color);
+--hero-card-overlay: var(--hero-primary-overlay);
+--hero-card-border-radius: .5rem;
+--hero-card-padding-x: 2rem;
+--hero-card-padding-y: 3rem;
+--hero-card-max-width: 600px;
+
+/* Alternative card — uses secondary variant values */
+--hero-alt-card-bg: var(--hero-secondary-bg-color);
+--hero-alt-card-color: var(--hero-secondary-color);
+--hero-alt-card-overlay: var(--hero-secondary-overlay);
+--hero-alt-card-border-radius: .5rem;
+--hero-alt-card-padding-x: 2rem;
+--hero-alt-card-padding-y: 3rem;
+--hero-alt-card-max-width: 600px;
+
 /* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
 --block-color-1: var(--secondary-bg);
 --block-text-1:  var(--body-color);
@@ -820,7 +831,7 @@ color-scheme: dark;
 	--btn-font-weight: 400;
 	--btn-line-height: 1.5;
 	--btn-color: var(--white);
-	--btn-bg: transparent;
+	--btn-bg: var(--body-bg);
 	--btn-border-width: 1px;
 	--btn-border-color: transparent;
 	--btn-border-radius: 0.25rem;

src/media/css/theme/light.standard.css

@@ -5,16 +5,6 @@
 
  SPDX-License-Identifier: GPL-3.0-or-later
 
-
-
- # FILE INFORMATION
- DEFGROUP: Joomla.Template.Site
- INGROUP: MokoCassiopeia
- PATH: ./media/templates/site/mokocassiopeia/css/global/light/colors_standard.css
- VERSION: 03.09.02
- BRIEF: Standard light mode color definitions for MokoCassiopeia template
- */
-
 /* -----------------------------------------------
  * LIGHT THEME
  * --------------------------------------------- */
@@ -525,6 +515,8 @@ color-scheme: light;
 --hero-bg-size: cover;
 --hero-border-bottom: solid var(--accent-color-secondary);
 --hero-overlay-bg: hsla(0, 0%, 0%, 0.1);
+--hero-overlay-bg-position: center;
+--hero-overlay-bg-size: cover;
 --hero-overlay-padding: 1em;
 --hero-overlay-text-align: center;
 --hero-overlay-text-color: var(--body-color);
@@ -540,6 +532,25 @@ color-scheme: light;
 --hero-secondary-overlay: linear-gradient(rgba(17, 40, 85, .75), rgba(17, 40, 85, .75));
 --hero-secondary-color: #f1f5f9;
 
+/* ===== HERO CARD (inner .hero element) ===== */
+/* Default card — uses primary variant values */
+--hero-card-bg: var(--hero-primary-bg-color);
+--hero-card-color: var(--hero-primary-color);
+--hero-card-overlay: var(--hero-primary-overlay);
+--hero-card-border-radius: .5rem;
+--hero-card-padding-x: 2rem;
+--hero-card-padding-y: 3rem;
+--hero-card-max-width: 600px;
+
+/* Alternative card — uses secondary variant values */
+--hero-alt-card-bg: var(--hero-secondary-bg-color);
+--hero-alt-card-color: var(--hero-secondary-color);
+--hero-alt-card-overlay: var(--hero-secondary-overlay);
+--hero-alt-card-border-radius: .5rem;
+--hero-alt-card-padding-x: 2rem;
+--hero-alt-card-padding-y: 3rem;
+--hero-alt-card-max-width: 600px;
+
 /* ===== BLOCK COLORS (top-a / top-b / bottom-a / bottom-b) ===== */
 --block-color-1: var(--color-primary);
 --block-text-1:  var(--body-color);
@@ -819,7 +830,7 @@ color-scheme: light;
 --btn-font-weight: 400;
 --btn-line-height: 1.5;
 --btn-color: hsl(210, 11%, 15%);
---btn-bg: transparent;
+--btn-bg: var(--body-bg);
 --btn-border-width: 1px;
 --btn-border-color: transparent;
 --btn-border-radius: 0.25rem;