/* ============================================================================
 * URSU home widgets — Category Grid + Thematic Categories Grid
 * Version 1.2 — the category widget's thumbnail panel colour is now configurable
 *   per widget (--ursu-cat-img-bg, unchanged default #fff).
 * Version 1.1 — mobile 'corner' layout: tighter left padding + a slightly
 *   tighter title width cap so long category names stop clipping over the
 *   white diagonal image panel. (Runtime cache-bust is automatic via the
 *   controllers' filemtime ?v=, so this stamp is just a human marker.)
 *
 * Equal-column flex grid (columns via --ursu-cols, fixed card height via
 * --ursu-card-h, image scales to fill) + Journal3 colour-scheme cards.
 *
 * Both widgets share ONE card layout engine: a media element (image/icon) + a
 * title element inside a flex card, arranged by the ursu-tlayout-* /
 * ursu-tfit-* / ursu-ttext-* / ursu-tvalign-* classes. The Category widget
 * defaults to the 'top' layout (image on top, name below); the Thematic widget
 * defaults to 'left' (icon beside title).
 *   media  = .ursu-thematic-icon , .ursu-cat-thumb
 *   title  = .ursu-thematic-title, .ursu-cat-name
 *   card   = .ursu-thematic-card , .ursu-cat-card
 * ========================================================================== */

.ursu-widget { margin: 0 0 10px; }
.ursu-widget-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ursu-title-color, hsl(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), var(--j-color-scheme-foreground-primary-l)));
}
.ursu-widget-title.ursu-align-left   { text-align: left; }
.ursu-widget-title.ursu-align-center { text-align: center; }
.ursu-widget-title.ursu-align-right  { text-align: right; }

/* ---- Equal-column grid: N columns, items wrap ---- */
.ursu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ursu-gap, 16px);
}
.ursu-grid > * {
  width: calc((100% - (var(--ursu-cols, 4) - 1) * var(--ursu-gap, 16px)) / var(--ursu-cols, 4));
  margin: 0;
}

/* ---- Shared card shell (colour-scheme aware, fixed height / auto width) ----
 * The card deliberately does NOT set `color`, so it keeps the theme's own link
 * colour (Journal writes `a { color: <brand link> }` as a literal and never
 * exposes it as a --j-color-scheme-* variable). The card text is painted
 * neutral below and reverts to `inherit` on hover, which is the only way to
 * pick up that colour without hard-coding it. */
.ursu-cat-card,
.ursu-thematic-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  height: var(--ursu-card-h, 260px);
  text-decoration: none;
  border: 1px solid var(--ursu-card-border, hsla(var(--j-color-scheme-background-border-h), var(--j-color-scheme-background-border-s), var(--j-color-scheme-background-border-l), var(--j-color-scheme-background-border-a, 1)));
  border-radius: 10px;
  background: var(--ursu-card-bg, hsla(var(--j-color-scheme-background-secondary-h), var(--j-color-scheme-background-secondary-s), var(--j-color-scheme-background-secondary-l), var(--j-color-scheme-background-secondary-a, 1)));
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
/* Both cards are <a> elements, so on hover Journal's own `a:hover` colour
 * applies and cascades to the card text via `inherit`. `currentColor` carries
 * that same colour to the border. Do NOT hard-code a colour here. */
.no-touchevents .ursu-cat-card:hover,
.no-touchevents .ursu-thematic-card:hover {
  transform: translateY(-3px);
  border-color: var(--ursu-border-hover, currentColor);
  box-shadow: 0 10px 24px hsla(var(--j-color-scheme-overlay-h, 0), var(--j-color-scheme-overlay-s, 0%), var(--j-color-scheme-overlay-l, 0%), .12);
}

/* ---- Media (icon / thumb) ---- */
.ursu-thematic-icon,
.ursu-cat-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: hsla(var(--j-color-scheme-image-background-h), var(--j-color-scheme-image-background-s), var(--j-color-scheme-image-background-l), var(--j-color-scheme-image-background-a, 1));
  overflow: hidden;
}
.ursu-thematic-icon img,
.ursu-cat-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .3s ease;
}
.ursu-tfit-cover .ursu-thematic-icon img,
.ursu-tfit-cover .ursu-cat-thumb img { object-fit: cover; }
.ursu-tfit-contain .ursu-thematic-icon img,
.ursu-tfit-contain .ursu-cat-thumb img { object-fit: contain; }

/* Category-only: physical display size of the IMAGE only (config %, default
   100%). Scales the <img>, not its box — so the white panel and the corner's
   diagonal cut keep their full size while the icon inside shrinks/grows. */
.ursu-cat-card .ursu-cat-thumb img {
  transform: scale(var(--ursu-cat-img-scale, 1));
}
/* The product photos carry a white background, which at 100% fills the box via
   object-fit. Give the media panel an explicit white too, so a scaled-DOWN
   image reveals white (not the theme's image-background) — a consistent white
   panel, diagonal cut included. --ursu-cat-img-bg is set per widget from the
   module's "Thumbnail background" field (blank there keeps this white). */
.ursu-cat-card .ursu-cat-thumb {
  background: var(--ursu-cat-img-bg, #fff);
}

.no-touchevents .ursu-thematic-card:hover .ursu-thematic-icon img { transform: scale(1.04); }
/* Compose the hover zoom with the configured scale. */
.no-touchevents .ursu-cat-card:hover .ursu-cat-thumb img { transform: scale(calc(var(--ursu-cat-img-scale, 1) * 1.04)); }

/* ---- Title (name) ---- */
.ursu-thematic-title,
.ursu-cat-name {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ursu-text, hsl(var(--j-color-scheme-foreground-primary-h), var(--j-color-scheme-foreground-primary-s), var(--j-color-scheme-foreground-primary-l)));
}
.ursu-ttext-left   .ursu-thematic-title, .ursu-ttext-left   .ursu-cat-name { text-align: left; }
.ursu-ttext-center .ursu-thematic-title, .ursu-ttext-center .ursu-cat-name { text-align: center; }
.ursu-ttext-right  .ursu-thematic-title, .ursu-ttext-right  .ursu-cat-name { text-align: right; }

/* `inherit` = the card anchor's colour = the theme's link colour. The
 * background layout keeps its white overlay text and is excluded. */
.no-touchevents .ursu-thematic-card:not(.ursu-tlayout-background):hover .ursu-thematic-title,
.no-touchevents .ursu-cat-card:not(.ursu-tlayout-background):hover .ursu-cat-name {
  color: var(--ursu-text-hover, inherit);
}

/* ---- Badge chip (available for future use) ---- */
.ursu-thematic-card .ursu-badge,
.ursu-cat-card .ursu-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: hsl(var(--j-color-scheme-brand-primary-h), var(--j-color-scheme-brand-primary-s), var(--j-color-scheme-brand-primary-l));
  color: hsl(var(--j-color-scheme-brand-primary-foreground-h), var(--j-color-scheme-brand-primary-foreground-s), var(--j-color-scheme-brand-primary-foreground-l));
  font-size: 11px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 4px;
}

/* ============================ Layout variants ============================ */

/* ---- Layout: icon/image right ---- */
.ursu-tlayout-right { flex-direction: row-reverse; }

/* ---- Layout: image on top, title below ---- */
.ursu-tlayout-top { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.ursu-tlayout-top .ursu-thematic-icon,
.ursu-tlayout-top .ursu-cat-thumb { width: 100%; height: auto; aspect-ratio: auto; flex: 1 1 auto; min-height: 0; border-radius: 0; }
.ursu-tlayout-top .ursu-thematic-title,
.ursu-tlayout-top .ursu-cat-name { flex: 0 0 auto; padding: 10px 12px; }

/* ---- Layout: corner (diagonal image in the bottom/right, title top-left) ---- */
.ursu-tlayout-corner { align-items: flex-start; padding: 14px 16px; }
.ursu-tlayout-corner .ursu-thematic-title,
.ursu-tlayout-corner .ursu-cat-name { align-self: flex-start; max-width: 55%; }
.ursu-tlayout-corner .ursu-thematic-icon,
.ursu-tlayout-corner .ursu-cat-thumb {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 52%; height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 1;
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Layout: full background image, title overlaid ---- */
.ursu-tlayout-background { align-items: flex-end; padding: 14px 16px; }
.ursu-tlayout-background .ursu-thematic-icon,
.ursu-tlayout-background .ursu-cat-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}
.ursu-tlayout-background .ursu-thematic-icon::after,
.ursu-tlayout-background .ursu-cat-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.6) 100%);
}
.ursu-tlayout-background .ursu-thematic-title,
.ursu-tlayout-background .ursu-cat-name {
  align-self: flex-end;
  width: 100%;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* ---- Layout: no image ---- */
.ursu-tlayout-none { justify-content: center; }
.ursu-tlayout-none .ursu-thematic-title,
.ursu-tlayout-none .ursu-cat-name { flex: 0 1 auto; }

/* ---- Vertical text alignment (overrides the layout default; 'auto' keeps it).
   Not applied to the 'top' layout, which is a vertical column. ---- */
.ursu-thematic-card:not(.ursu-tlayout-top).ursu-tvalign-top    .ursu-thematic-title,
.ursu-cat-card:not(.ursu-tlayout-top).ursu-tvalign-top         .ursu-cat-name { align-self: flex-start; }
.ursu-thematic-card:not(.ursu-tlayout-top).ursu-tvalign-middle .ursu-thematic-title,
.ursu-cat-card:not(.ursu-tlayout-top).ursu-tvalign-middle      .ursu-cat-name { align-self: center; }
.ursu-thematic-card:not(.ursu-tlayout-top).ursu-tvalign-bottom .ursu-thematic-title,
.ursu-cat-card:not(.ursu-tlayout-top).ursu-tvalign-bottom      .ursu-cat-name { align-self: flex-end; }

/* ---- Tablet: never more than 3 columns ---- */
@media (max-width: 900px) and (min-width: 768px) {
  .ursu-grid > * { width: calc((100% - (min(var(--ursu-cols, 4), 3) - 1) * var(--ursu-gap, 16px)) / min(var(--ursu-cols, 4), 3)); }
}

/* ============================================================================
 * Mobile (<= 767px): its own columns / gap / card height, set from the module
 * config as --ursu-cols-m / --ursu-gap-m / --ursu-card-h-m. Defaults to a
 * compact 2-up grid rather than one full-width card per row.
 * ========================================================================== */
@media (max-width: 767px) {
  .ursu-grid {
    gap: var(--ursu-gap-m, 10px);
  }
  .ursu-grid > * {
    width: calc((100% - (var(--ursu-cols-m, 2) - 1) * var(--ursu-gap-m, 10px)) / var(--ursu-cols-m, 2));
  }
  .ursu-cat-card,
  .ursu-thematic-card {
    height: var(--ursu-card-h-m, 180px);
    border-radius: 8px;
    gap: 8px;
    padding: 8px 10px;
  }

  .ursu-widget-title { margin-bottom: 12px; font-size: 16px; }

  /* Tighter chrome so media + title still fit 2-up */
  .ursu-thematic-title,
  .ursu-cat-name { font-size: 12px; }
  .ursu-thematic-icon,
  .ursu-cat-thumb { border-radius: 6px; }
  .ursu-tlayout-top .ursu-thematic-title,
  .ursu-tlayout-top .ursu-cat-name { padding: 8px 8px; }
  /* Corner layout: the title sits in the top-left triangle while the diagonal
     white image panel fills the right. On the narrow 2-up cards long names ran
     1–2 letters into that white panel, so pull the LEFT padding in (a touch
     more room before the diagonal) and cap the title a little tighter to keep a
     small safety gap on the RIGHT. Mobile only — desktop stays 14px/55%. */
  .ursu-tlayout-corner { padding: 10px 10px 10px 7px; }
  .ursu-tlayout-corner .ursu-thematic-title,
  .ursu-tlayout-corner .ursu-cat-name { max-width: 56%; }
  .ursu-tlayout-background { padding: 10px 10px; }

  /* At 3+ columns the icon-beside-title layouts run out of width, so stack. */
  @media (max-width: 480px) {
    .ursu-thematic-card.ursu-tlayout-left,
    .ursu-thematic-card.ursu-tlayout-right,
    .ursu-cat-card.ursu-tlayout-left,
    .ursu-cat-card.ursu-tlayout-right {
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }
    .ursu-thematic-card.ursu-tlayout-left .ursu-thematic-icon,
    .ursu-thematic-card.ursu-tlayout-right .ursu-thematic-icon,
    .ursu-cat-card.ursu-tlayout-left .ursu-cat-thumb,
    .ursu-cat-card.ursu-tlayout-right .ursu-cat-thumb {
      height: auto;
      width: 40%;
      max-height: 55%;
    }
    .ursu-thematic-card.ursu-tlayout-left .ursu-thematic-title,
    .ursu-thematic-card.ursu-tlayout-right .ursu-thematic-title,
    .ursu-cat-card.ursu-tlayout-left .ursu-cat-name,
    .ursu-cat-card.ursu-tlayout-right .ursu-cat-name {
      flex: 0 0 auto;
      text-align: center;
    }
  }
}

/* ---- Fallback for browsers without aspect-ratio (media element) ---- */
@supports not (aspect-ratio: 1 / 1) {
  .ursu-thematic-icon,
  .ursu-cat-thumb { width: 56px; }
  .ursu-tlayout-top .ursu-thematic-icon,
  .ursu-tlayout-top .ursu-cat-thumb,
  .ursu-tlayout-corner .ursu-thematic-icon,
  .ursu-tlayout-corner .ursu-cat-thumb,
  .ursu-tlayout-background .ursu-thematic-icon,
  .ursu-tlayout-background .ursu-cat-thumb { width: 100%; }
}