/* ==========================================================
   Arles → Fixed-size Grids (images & subcategories) — V1.1
   Date: 2025-09-05
   - One table class: .index_table
   - Image cells:       td.index_table_cell > .thumbnail > a > img
   - Subcategory cells: td.index_subcat_table_cell > .subcategory_thumbnail > a > img
   - Columns fixed to Arles' <img width="…"> (no expansion)
   - Centers short rows; hides padded empty cells
   - Theme controls all colors (no overrides here)
   ========================================================== */

:root{
  --thumb-gap:14px;
  --caption-pad:10px 12px;
  --caption-fz:.95rem;
  --focus-ring:#6aa2ff;

  /* Subcategory title spacing & clamp */
  --subcat-gap-top: 6px;        /* space above the title */
  --subcat-gap-bottom: 14px;    /* larger space below the title */
  --subcat-title-lines: 2;      /* lines to reserve/clamp */
}

/* Base grid: fixed columns; centered rows */
.index_table{
  display:grid !important;
  gap:var(--thumb-gap);
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  justify-content:center;                          /* center leftover space */
  grid-template-columns:repeat(auto-fit,minmax(240px,240px)); /* fallback if no width=... found */
}

/* Flatten table structure so cells flow as grid items */
.index_table > tbody,
.index_table > thead,
.index_table > tfoot,
.index_table tr{ display:contents !important; }

/* Neutralize fixed sizes Arles may inject */
.index_table, .index_table *{ max-width:none !important; }
.index_table td, .index_table td *{ width:auto !important; height:auto !important; }

/* Hide filler cells on last row (no <img> inside) */
.index_table td:not(:has(img)){ display:none !important; }

/* =========================
   Tiles (natural aspect)
   ========================= */

td.index_table_cell,
td.index_subcat_table_cell{
  display:block !important;
  padding:0 !important;
  position:relative;
  line-height:0;
}

/* Link wraps image; use it as positioning context + clip zoom */
.index_table_cell .thumbnail > a,
.index_subcat_table_cell .subcategory_thumbnail > a{
  display:block;
  position:relative;
  text-decoration:none;
  outline:none;
  overflow:hidden;         /* keeps hover zoom tidy */
}

/* Thumbnails: scale to column width; keep natural aspect */
.index_table_cell .thumbnail > a > img,
.index_subcat_table_cell .subcategory_thumbnail > a > img{
  display:block;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  border:0 !important;

  /* Smooth, centered hover zoom */
  transform:translateZ(0) scale(1);
  transform-origin:50% 50%;
  transition:transform 240ms cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  -webkit-backface-visibility:hidden;
}

/* Hover zoom (hover-only; focus does not scale) */
.index_table_cell .thumbnail > a:hover > img,
.index_table_cell .thumbnail img:hover,
.index_subcat_table_cell .subcategory_thumbnail > a:hover > img,
.index_subcat_table_cell .subcategory_thumbnail img:hover{
  transform:translateZ(0) scale(1.05);
}

/* No zoom on focus (prevents “stuck” after Back) */
.index_table_cell:focus-within img,
.index_subcat_table_cell:focus-within img{
  transform:translateZ(0) scale(1);
}

/* If focused AND hovered, let hover win */
.index_table_cell:focus-within .thumbnail > a:hover > img,
.index_subcat_table_cell:focus-within .subcategory_thumbnail > a:hover > img{
  transform:translateZ(0) scale(1.05);
}

/* Keyboard focus ring on links */
.index_table_cell .thumbnail > a:focus-visible,
.index_subcat_table_cell .subcategory_thumbnail > a:focus-visible{
  box-shadow:0 0 0 3px var(--focus-ring) inset;
}

/* =========================
   Optional overlay caption (only if you add <span class="index_title">…</span>)
   ========================= */
.index_table .index_title{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:var(--caption-pad);
  color:#fff;  /* change to 'inherit' if you want theme to control color */
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  font-size:var(--caption-fz);
  line-height:1.35;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.index_table td:hover .index_title,
.index_table td:focus-within .index_title{
  opacity:1; transform:translateY(0);
}

/* =========================
   FIXED column widths from <img width="…">
   (Add/remove the sizes you actually export.)
   These override the fallback 240px line above.
   ========================= */
.index_table:has(img[width="320"]){ grid-template-columns:repeat(auto-fit,minmax(320px,320px)); }
.index_table:has(img[width="300"]){ grid-template-columns:repeat(auto-fit,minmax(300px,300px)); }
.index_table:has(img[width="280"]){ grid-template-columns:repeat(auto-fit,minmax(280px,280px)); }
.index_table:has(img[width="260"]){ grid-template-columns:repeat(auto-fit,minmax(260px,260px)); }
.index_table:has(img[width="250"]){ grid-template-columns:repeat(auto-fit,minmax(250px,250px)); }
.index_table:has(img[width="240"]){ grid-template-columns:repeat(auto-fit,minmax(240px,240px)); }
.index_table:has(img[width="220"]){ grid-template-columns:repeat(auto-fit,minmax(220px,220px)); }
.index_table:has(img[width="210"]){ grid-template-columns:repeat(auto-fit,minmax(210px,210px)); }
.index_table:has(img[width="200"]){ grid-template-columns:repeat(auto-fit,minmax(200px,200px)); }
.index_table:has(img[width="190"]){ grid-template-columns:repeat(auto-fit,minmax(190px,190px)); }
.index_table:has(img[width="180"]){ grid-template-columns:repeat(auto-fit,minmax(180px,180px)); }
.index_table:has(img[width="170"]){ grid-template-columns:repeat(auto-fit,minmax(170px,170px)); }
.index_table:has(img[width="160"]){ grid-template-columns:repeat(auto-fit,minmax(160px,160px)); }
.index_table:has(img[width="150"]){ grid-template-columns:repeat(auto-fit,minmax(150px,150px)); }

/* =========================
   Subcategory titles BELOW the image (spacing + no stepping)
   ========================= */
.index_subcat_table_cell .subcategory_thumbnail{
  display:block;
  position:relative;
  overflow:hidden;                        /* clips scale(1.05) on hover */
  margin-bottom: var(--subcat-gap-top);   /* gap between image and title */
}
:where(.subcategory_thumbnail_title){
  line-height: 1.35;
  font-size: var(--caption-fz);
  margin: var(--subcat-gap-top) 2px var(--subcat-gap-bottom) 2px;
  padding: 0 2px;
  text-align: center;
  color: inherit;                         /* theme controls color & states */
}
/* Clamp to a fixed number of lines so tiles don’t get taller on long titles */
:where(.subcategory_thumbnail_title) a{
  text-decoration: none;
  color: inherit;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--subcat-title-lines);
          line-clamp: var(--subcat-title-lines);
  overflow: hidden;

  /* Reserve exactly N lines of height so every tile is the same height */
  height: calc(1.35em * var(--subcat-title-lines));   /* 1.35 = line-height */
}

/* =========================
   Neutralize global spacing inside the gallery & keep zoom clipped
   ========================= */
.index_table td { padding: 0 !important; }

.index_table_cell .thumbnail,
.index_subcat_table_cell .subcategory_thumbnail { 
  overflow: hidden;    /* ensures scale(1.05) never bleeds into title/neighbor */
}

.index_table_cell .thumbnail > a > img,
.index_subcat_table_cell .subcategory_thumbnail > a > img{
  padding: 0 !important; 
  border: 0 !important;
  box-sizing: content-box; /* keeps 150/210 as true content width */
}

/* If the gallery lives under #content-iann, belt-and-braces: */
#content-iann .index_table img { padding: 0 !important; }

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .index_table_cell .thumbnail > a > img,
  .index_subcat_table_cell .subcategory_thumbnail > a > img,
  .index_table .index_title{
    transition:none !important;
  }
}

/* Optional: cap gallery width on huge screens
.index_table{ max-width:1400px; margin-inline:auto; }
*/

/* Global gallery spacing */
:root { --thumb-gap: 20px; }  /* try 16–20px to taste */

/* Small gap below H1 regardless of what comes next (nav or grid) */
#content-iann h1 + * {
  margin-top: 10px;  /* tweak 8–12px to taste */
}