From 3e748f608097d0b08035c5eb73b5ff6636610bb7 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 22:06:48 +0000
Subject: [PATCH] .

---
 cards/templates/cards/_card_hero_styles.html  | 20 +++++++++++-
 .../templates/cards/_card_inner_design1.html  |  2 +-
 .../templates/cards/_card_inner_design2.html  |  2 +-
 .../templates/cards/_card_inner_design3.html  |  2 +-
 cards/templates/cards/printable.html          | 31 +++++--------------
 5 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/cards/templates/cards/_card_hero_styles.html b/cards/templates/cards/_card_hero_styles.html
index 2623582..fe4729e 100644
--- a/cards/templates/cards/_card_hero_styles.html
+++ b/cards/templates/cards/_card_hero_styles.html
@@ -1,6 +1,24 @@
 <style>
+  /* Canonical card size variables used by preview and printable views so
+     the card internal layout is identical between screen and print. These
+     defaults can be overridden by wrappers if needed. Units are in mm to
+     match print sizing. */
+  :root{
+    --card-width: 83mm;    /* default card width */
+    --card-height: 120mm;  /* default card height */
+  }
+
   /* Shared hero image rules used by both preview (base.html) and printable view */
-  .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
+  .toptrump-card{
+    width:var(--card-width);
+    height:var(--card-height);
+    box-sizing:border-box;
+    overflow:hidden;
+    border-radius:8px;
+    background-clip:padding-box;
+  }
+
+  .toptrump-card .hero-image{height:calc(var(--card-height) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
 
   /* For most designs center the dino image absolutely and allow an inline
      scale transform (the fragments provide `transform: translate(...) scale(...)`). */
diff --git a/cards/templates/cards/_card_inner_design1.html b/cards/templates/cards/_card_inner_design1.html
index 8b2ae07..6fdb522 100644
--- a/cards/templates/cards/_card_inner_design1.html
+++ b/cards/templates/cards/_card_inner_design1.html
@@ -1,7 +1,7 @@
 {# Shared inner fragment for Design 1 - core card markup only #}
 <div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
   <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></div>
-  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; position:relative; overflow:hidden;">
+  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; position:relative; overflow:hidden;">
     {# Print fallback: actual <img> element that is hidden on screen but shown by `printable.html` via its print stylesheet. #}
     {% if card.background and card.background.image or background and background.image %}
       <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
diff --git a/cards/templates/cards/_card_inner_design2.html b/cards/templates/cards/_card_inner_design2.html
index fdd16bc..566484b 100644
--- a/cards/templates/cards/_card_inner_design2.html
+++ b/cards/templates/cards/_card_inner_design2.html
@@ -1,6 +1,6 @@
 {# Shared inner fragment for Design 2 - core card markup only #}
 <div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
-  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:220px; filter:brightness(0.7); position:relative; overflow:hidden;">
+  <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.7); position:relative; overflow:hidden;">
     {% if card.background and card.background.image or background and background.image %}
       <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
     {% endif %}
diff --git a/cards/templates/cards/_card_inner_design3.html b/cards/templates/cards/_card_inner_design3.html
index 5109e44..5782f0b 100644
--- a/cards/templates/cards/_card_inner_design3.html
+++ b/cards/templates/cards/_card_inner_design3.html
@@ -1,6 +1,6 @@
 {# Shared inner fragment for Design 3 - core card markup only #}
 <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
-  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; height:200px; filter:brightness(0.9); position:relative; overflow:hidden;">
+  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.9); position:relative; overflow:hidden;">
     {% if card.background and card.background.image or background and background.image %}
       <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
     {% endif %}
diff --git a/cards/templates/cards/printable.html b/cards/templates/cards/printable.html
index 17820f0..bfac88e 100644
--- a/cards/templates/cards/printable.html
+++ b/cards/templates/cards/printable.html
@@ -10,31 +10,14 @@
       html,body{height:100%; margin:0; padding:0;}
       body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111}
       .sheet{width:210mm; min-height:297mm; box-sizing:border-box; padding:6mm; display:block}
-      .cards-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8mm}
-      .print-card{break-inside:avoid; page-break-inside:avoid; width:100%;}
+      .cards-grid{display:grid; gap:8mm; grid-auto-rows: var(--card-height); justify-content:center}
+      .print-card{break-inside:avoid; page-break-inside:avoid; display:flex; justify-content:center; align-items:center;}
       /* Scale the toptrump-card down a bit for printing */
       .toptrump-card{box-shadow:none; border:none;}
-      /* Force designs to sizes that fit two-up per A4 page */
-      .toptrump-card.design-1,
-      .toptrump-card.design-2,
-      .toptrump-card.design-3,
-      .toptrump-card.design-5 { width: 98%; min-height: 120mm; }
-      .toptrump-card.design-4 { width: 98%; min-height: 135mm; }
-
-      /* Per-page adjustments: if rendering 4-up we reduce min-heights so cards fit */
-      {% if per_page == 4 %}
-        .toptrump-card.design-1,
-        .toptrump-card.design-2,
-        .toptrump-card.design-3,
-        .toptrump-card.design-5 { min-height: 62mm; }
-        .toptrump-card.design-4 { min-height: 70mm; }
-      {% elif per_page == 1 %}
-        .toptrump-card.design-1,
-        .toptrump-card.design-2,
-        .toptrump-card.design-3,
-        .toptrump-card.design-5 { min-height: 180mm; }
-        .toptrump-card.design-4 { min-height: 220mm; }
-      {% endif %}
+      /* Card sizes are controlled by the canonical variables in
+         `_card_hero_styles.html` so preview and printable views keep the
+         same internal layout. The printable layout uses the same fixed
+         card dimensions and arranges them per page using the grid. */
       /* Ensure hero images scale inside print cards */
       .print-card .hero-image{height:auto; min-height:40mm;}
       .print-card img.card-hero-img{max-width:100%; height:auto; object-fit:contain}
@@ -104,7 +87,7 @@
 
     {% for page_cards in pages %}
       <div class="sheet">
-        <div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, 1fr); gap:8mm;">
+        <div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;">
           {% for card in page_cards %}
             <div class="print-card">
               {% if design == 1 %}