/* ============================================================
   TILE MATRIX — Stylesheet
   ============================================================
   Edit this file to control:
   1. TILE SIZES      → dimensions for each of the 4 tile types
   2. TILE FORMATS    → visual styles (colors, borders, etc.)
   3. SECTION STYLES  → subtitle typography, padding, spacing
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   BASE — Reset & Page
   ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Left/right page margins ──
     These shrink on smaller screens via media queries below.
     Everything else (gap, section width) derives from this. */
  --margin-h: 5vw;

  /* Number of columns in the widest section */
  --max-cols: 10;

  /* Dynamic horizontal gap — fills remaining space after tiles and margins.
     max(2px, ...) ensures it never goes negative on very small screens. */
  --cell-gap: max(2px, calc(
    (100vw - 2 * var(--margin-h) - 2 * var(--section-padding-h)
     - var(--max-cols) * var(--tile-standard-width))
    / (var(--max-cols) - 1)
  ));

  /* Fixed vertical gap between rows — never changes */
  --cell-row-gap: 6px;

  /* Fixed gap inside sub-matrices — not dynamic */
  --subcell-gap: 6px;

  /* Page background (visible between sections if --section-gap > 0) */
  --page-bg: #404040;

  /* Tile border width */
  --tile-border-width:       1px;
  --tile-small-border-width: 1px;      /* ← distinct border width for small tiles */
  --tile-medium-h-border-width: 2px;   /* ← distinct border width for medium horizontal tiles */
  --tile-medium-v-border-width: 2px;   /* ← distinct border width for medium vertical tiles */

  /* Tile hover transition speed */
  --tile-transition: 0.25s ease;
}

/* ── Responsive margins ──
   Margins shrink progressively so the matrix always fits on screen. */
@media (max-width: 1400px) { :root { --margin-h: 3vw; } }
@media (max-width: 1100px) { :root { --margin-h: 1.5vw; } }
@media (max-width: 900px)  { :root { --margin-h: 0.5vw; } }

body {
  background-color: var(--page-bg);
  font-family: 'Epilogue', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;   /* prevents scrollbar caused by 100vw including scrollbar width */
}


/* ────────────────────────────────────────────────────────────
   PAGE TITLE
   ──────────────────────────────────────────────────────────── */

.page-title {
  color:          #e8e6e0;
  font-family:    'DM Serif Display', Georgia, serif;
  font-size:      clamp(1.8rem, 1vw, 3rem);
  letter-spacing: -0.02em;
  padding:        36px 0 16px;
  text-align:     left;
}


/* ────────────────────────────────────────────────────────────
   SECTIONS
   ─────────────────────────────────────────────────────────────
   Each section has its background-color set inline by JS
   (from the config's `background` property).

   • --section-padding-v / --section-padding-h  : inner whitespace
   • --section-gap                               : gap between sections
   • --section-radius                            : rounded corners
   ──────────────────────────────────────────────────────────── */

:root {
  --section-padding-v: 7px;
  --section-padding-h: 48px;
  --section-gap:       2px;
  --section-radius:    5px;
}

@media (max-width: 1100px) { :root { --section-padding-h: 24px; } }
@media (max-width: 900px)  { :root { --section-padding-h: 12px; } }

.page-sections {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  width:          calc(100vw - 2 * var(--margin-h));
  margin:         0 var(--margin-h);
  gap:            var(--section-gap);
  padding:        10px 0 48px;
}

.tile-section {
  width:       fit-content;
  padding-top: 0;
  /* background-color and border-radius moved to .section-content below */
}

/* Wrapper around the tiles — carries the section background color and radius */
.section-content {
  /* background-color applied inline from config (moved from .tile-section) */
  padding:       var(--section-padding-v) var(--section-padding-h);
  border-radius: var(--section-radius);
}

/* ── Section subtitle ── */
.section-subtitle {
  font-family:      Arial, Georgia, serif;
  font-size:        clamp(1rem, 0.8vw, 1.45rem);
  font-weight:      600;
  letter-spacing:   0.01em;

  /* ── Shared subtitle color — edit this single value ── */
  color:            #cccccc;

  /* ── Page background so section color doesn't show behind it ── */
  background-color: var(--page-bg);

  /* ── Stretch to cover section padding on both sides ── */
  width:            calc(100% + 2 * var(--section-padding-h));
  margin-left:      0; /* calc(-1 * var(--section-padding-h)); */
  padding-left:     0;
  padding-right:    0;
  padding-top:      10px;
  padding-bottom:   2px;
  margin-bottom:    1px;  /* ← space between the subtitle and the first tile row */

  display:          flex;
  align-items:      center;
  justify-content:  flex-start;
  gap:              10px;
}


/* ────────────────────────────────────────────────────────────
   MAIN MATRIX
   ──────────────────────────────────────────────────────────── */

.tile-matrix {
  display: grid;
  grid-template-columns: repeat(var(--matrix-cols, 4), var(--tile-standard-width));
  grid-template-rows:    repeat(var(--matrix-rows, 3), var(--tile-standard-height));
  column-gap: var(--cell-gap);      /* dynamic — expands with viewport */
  row-gap:    var(--cell-row-gap);  /* fixed */
  width: fit-content;
}

.matrix-cell {
  width:   var(--tile-standard-width);
  height:  var(--tile-standard-height);
  display: flex;
  align-items:     center;
  justify-content: center;
  position: relative;
}

/* Uncomment to show a faint ghost for empty cells:
.matrix-cell.cell-empty {
  background: rgba(128,128,128,0.06);
  border-radius: 8px;
} */


/* ────────────────────────────────────────────────────────────
   SUB-MATRIX (2 × 2 grid inside one standard cell)
   ──────────────────────────────────────────────────────────── */

.sub-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  gap:    var(--subcell-gap);
  width:  100%;
  height: 100%;
}


/* ────────────────────────────────────────────────────────────
   TILE SIZES
   ─────────────────────────────────────────────────────────────
   Adjust width, height, padding and border-radius for each
   of the 4 tile types here.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Standard tile — fixed size across ALL sections ──
     Set both to the same value for square tiles (default).
     Set different values for rectangular tiles.
     --tile-standard-width  drives the column size and the dynamic gap formula.
     --tile-standard-height drives the row size. ── */
  --tile-standard-width:   105px;
  --tile-standard-height:  105px;   /* change to e.g. 80px for landscape rectangles */
  --tile-standard-padding: 2px;
  --tile-standard-radius:  12px;

  /* ── Reduced tile — smaller variant of the standard tile ── */
  --tile-reduced-width:    85px;
  --tile-reduced-height:   85px;
  --tile-reduced-padding:  2px;
  --tile-reduced-radius:   12px;

  /* ── Small tile (one sub-matrix cell, ~half the standard size) ── */
  --tile-small-padding:    0px;
  --tile-small-radius:     10px;

  /* ── Medium Horizontal (spans 2 columns of the same sub-matrix row) ── */
  --tile-medium-h-padding: 1px;
  --tile-medium-h-radius:  10px;

  /* ── Medium Vertical (spans 2 rows of the same sub-matrix column) ── */
  --tile-medium-v-padding: 1px;
  --tile-medium-v-radius:  10px;
}

/* ── Responsive tile size ──────────────────────────────────────
   On small screens the tile is computed so all 10 columns fit
   in the available width (viewport minus margins and padding),
   with a minimum 2px gap between columns.
   Formula: (available width - 9 × min-gap) / 10
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --tile-standard-width: calc(
      (100vw - 2 * var(--margin-h) - 2 * var(--section-padding-h)
       - (var(--max-cols) - 1) * 2px)
      / var(--max-cols)
    );

    /* Height scales proportionally to width, preserving the original aspect ratio.
       Default ratio is 1 (square). If you set a custom height on desktop,
       update the ratio below: e.g. 80/110 ≈ 0.727 for 80px height on 110px width. */
    --tile-standard-height: calc(var(--tile-standard-width) * 1);

    /* Padding and radius scale with width */
    --tile-standard-padding: calc(var(--tile-standard-width) * 0.027);
    --tile-standard-radius:  calc(var(--tile-standard-width) * 0.109);

    /* Reduced tile scales proportionally to standard (ratio 90/100 = 0.9) */
    --tile-reduced-width:    calc(var(--tile-standard-width) * 0.9);
    --tile-reduced-height:   calc(var(--tile-standard-height) * 0.9);
    --tile-reduced-padding:  0px;
    --tile-reduced-radius:   calc(var(--tile-standard-width) * 0.091);

    --tile-small-padding:    calc(var(--tile-standard-width) * 0.018);
    --tile-small-radius:     calc(var(--tile-standard-width) * 0.091);

    --tile-medium-h-padding: calc(var(--tile-standard-width) * 0.018);
    --tile-medium-h-radius:  calc(var(--tile-standard-width) * 0.091);

    --tile-medium-v-padding: calc(var(--tile-standard-width) * 0.018);
    --tile-medium-v-radius:  calc(var(--tile-standard-width) * 0.091);
  }
}

.tile-standard {
  width:         var(--tile-standard-width);
  height:        var(--tile-standard-height);
  padding:       var(--tile-standard-padding);
  border-radius: var(--tile-standard-radius);
}

.tile-reduced {
  width:         var(--tile-reduced-width);
  height:        var(--tile-reduced-height);
  padding:       var(--tile-reduced-padding);
  border-radius: var(--tile-reduced-radius);
}

.tile.tile-small {
  width:         100%;
  height:        100%;
  padding:       var(--tile-small-padding);
  border-radius: var(--tile-small-radius);
  border-width:  var(--tile-small-border-width);
}

.tile.tile-medium-h {
  width:         100%;
  height:        100%;
  padding:       var(--tile-medium-h-padding);
  border-radius: var(--tile-medium-h-radius);
  border-width:  var(--tile-medium-h-border-width);
  grid-column:   span 2;
}

.tile.tile-medium-v {
  width:         100%;
  height:        100%;
  padding:       var(--tile-medium-v-padding);
  border-radius: var(--tile-medium-v-radius);
  border-width:  var(--tile-medium-v-border-width);
  grid-row:      span 2;
}


/* ────────────────────────────────────────────────────────────
   TILE — Shared base style (all sizes inherit this)
   ──────────────────────────────────────────────────────────── */

.tile {
  display:         block;
  overflow:        hidden;
  border-style:    solid;
  border-width:    var(--tile-border-width);
  text-decoration: none;
  position:        relative;
  transition:
    transform    var(--tile-transition),
    box-shadow   var(--tile-transition),
    border-color var(--tile-transition);
}

.tile img {
  display:       block;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: inherit;
  transition:    transform 0.4s ease, filter 0.3s ease;
}

/* SVG images (logos, icons) must not be cropped — scale to fit instead */
.tile img[src$=".svg"] {
  object-fit: contain;
}

/* ── Hover effects — mouse/trackpad only ──────────────────────
   (hover: hover) + (pointer: fine) matches devices with a real
   hover capability and a precise pointer (mouse, trackpad).
   Touch screens fail both conditions so they never see these. */
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform:  translateY(-3px) scale(1.02);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  }

  .tile:hover img {
    transform: scale(1.06);
    filter:    brightness(1.1);
  }
}

/* ── Tap feedback — touch screens only ────────────────────────
   :active fires when the user presses the tile, giving immediate
   visual feedback in place of the hover effect. */
@media (hover: none) {
  .tile:active {
    transform:  scale(0.96);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    filter:     brightness(1.08);
  }
}


/* ────────────────────────────────────────────────────────────
   TILE FORMATS
   ─────────────────────────────────────────────────────────────
   Add as many formats as you need.
   Each format sets background-color and border-color.
   Apply via class:   class="tile tile-standard format-2"
   ──────────────────────────────────────────────────────────── */

/* Format 1 — Transparent */
.format-1 { background-color: Transparent; border-color: Transparent; }
.format-1:hover { border-color: Red; }

/* Format 1b — Transparent / White */
.format-1b { background-color: Transparent; border-color: #ffffff; }
.format-1b:hover { border-color: Red; }

/* Format 2 — Black */
.format-2 { background-color: #000000; border-color: #000000; }
.format-2:hover { border-color: Red; }

/* Format 2b — Black / White */
.format-2b { background-color: #000000; border-color: #ffffff; }
.format-2b:hover { border-color: Red; }

/* Format 3 — White */
.format-3 { background-color: #ffffff; border-color: #ffffff; }
.format-3:hover { border-color: Red; }

/* Format 4 — einrichten-orange */
.format-4 { background-color: #ffffff; border-color: #eb5c2d; }
.format-4:hover { border-color: Red; }

/* Format 5 — goyard-green */
.format-5 { background-color: #183f26; border-color: #183f26; }
.format-5:hover { border-color: Red; }

/* Format 6 — ikea-blue / white */
.format-6 { background-color: #0058ab; border-color: #0058ab; }
.format-6:hover { border-color: Red; }

/* Format 7 — dark-grey */
.format-7 { background-color: #424242; border-color: #424242; }
.format-7:hover { border-color: Red; }

/* Format 8 — utap-dark-grey */
.format-8 { background-color: #232323; border-color: #232323; }
.format-8:hover { border-color: Red; }

/* Format 9 — renault-yellow */
.format-9 { background-color: #fcb415; border-color: #fcb415; }
.format-9:hover { border-color: Red; }

/* Format 10 — miele-red */
.format-10 { background-color: #8c0014; border-color: #8c0014; }
.format-10:hover { border-color: Red; }

/* Format 11 — ace-dark-blue */
.format-11 { background-color: #21253a; border-color: #21253a; }
.format-11:hover { border-color: Red; }

/* ── Gradient formats ──────────────────────────────────────────
   Use background-image with linear-gradient instead of background-color.
   The double gradient trick below uses background-clip to apply one
   gradient to the content area and another to the padding/border area:
     - content-box gradient: visible inside the padding
     - padding-box gradient: visible behind the border
   This way the border area can have a different color than the content.
   ──────────────────────────────────────────────────────────── */

/* Format g1 — red gradient (dark red → bright red, top to bottom) */
.format-g1 {
  background-image:
    linear-gradient(to bottom, rgba(183, 36, 18, 1) 30%, rgba(255, 64, 0, 1) 100%),
    linear-gradient(to bottom, rgba(183, 36, 18, 1) 0%,  rgba(183, 36, 18, 1) 100%);
  background-clip: content-box, padding-box;
  border-color: transparent;   /* border color comes from padding-box gradient */
}
.format-g1:hover { border-color: Red; }