/* Food topic hubs — visual layer over the existing markup.
   Headings, links and text are unchanged; everything here is presentation
   or aria-hidden decoration. */

/* —— Hero: copy left, a mosaic of the hub's own foods right —— */
.hub-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 90% 10%, hsl(var(--primary) / 0.1) 0%, transparent 70%),
    linear-gradient(180deg, hsl(var(--primary) / 0.05) 0%, transparent 85%);
}

.hub-hero h1 {
  text-wrap: balance;
}

/* Below 1024px: a strip of four photos under the search */
.hub-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1.75rem;
  max-width: 36rem;
}

.hub-mosaic__tile {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.8rem;
  background: hsl(var(--muted));
  box-shadow: 0 10px 20px -14px rgba(15, 23, 42, 0.4);
}

.hub-mosaic__tile img,
.hub-mosaic__tile picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hub-hero > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    column-gap: 3.5rem;
    align-items: center;
  }

  .hub-hero > .container > :not(.hub-mosaic) {
    grid-column: 1;
  }

  .hub-mosaic {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: none;
    margin-top: 0;
    transform: rotate(-2deg);
  }

  .hub-mosaic__tile {
    border-radius: 1.1rem;
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.06),
      0 20px 40px -20px rgba(15, 23, 42, 0.35);
  }

  .hub-mosaic__tile:nth-child(2) { transform: translateY(1.25rem); }
  .hub-mosaic__tile:nth-child(4) { transform: translateY(1.25rem); }
}

/* —— Status overview: a proportional bar above the counts —— */
.hub-status {
  padding-block: 2.5rem 1rem;
}

@media (min-width: 768px) {
  .hub-status {
    padding-block: 3.5rem 1.5rem;
  }
}

.hub-status-bar {
  display: flex;
  gap: 3px;
  height: 0.85rem;
  margin-top: 1.5rem;
  max-width: 48rem;
  overflow: hidden;
  border-radius: 999px;
  background: hsl(var(--muted));
}

.hub-status-bar__seg {
  flex-basis: 0;
  min-width: 0.6rem;
  background: #0e7490;
}

.hub-status-bar__seg--halal { background: #1f7a44; }
.hub-status-bar__seg--haram { background: #b91c1c; }
.hub-status-bar__seg--halal-if-verified { background: #0e7490; }
.hub-status-bar__seg--market-dependent { background: #7c3aed; }
.hub-status-bar__seg--scholarly-difference { background: #d97706; }

.food-hub-status-summary__item {
  border-radius: 999px !important;
}

/* —— Result cards: status as a coloured pill, a softer card —— */
.food-hub-result {
  border-radius: 1rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px -18px rgba(15, 23, 42, 0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.food-hub-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 32px -18px rgba(15, 23, 42, 0.32);
}

.food-hub-result__media {
  border-radius: 0.75rem !important;
  overflow: hidden;
}

.food-hub-result .food-index-dot {
  display: none;
}

[data-status] .food-hub-result__status {
  --tone: #0e7490;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  margin-top: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 11%, transparent);
  color: var(--tone) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
}

[data-status] .food-hub-result__status::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
}

[data-status="halal"] .food-hub-result__status { --tone: #1f7a44; }
[data-status="haram"] .food-hub-result__status { --tone: #b91c1c; }
[data-status="halal-if-verified"] .food-hub-result__status { --tone: #0e7490; }
[data-status="market-dependent"] .food-hub-result__status { --tone: #6d28d9; }
[data-status="scholarly-difference"] .food-hub-result__status { --tone: #b45309; }

.dark [data-status="halal"] .food-hub-result__status { --tone: #4ade80; }
.dark [data-status="haram"] .food-hub-result__status { --tone: #f87171; }
.dark [data-status="halal-if-verified"] .food-hub-result__status { --tone: #22d3ee; }
.dark [data-status="market-dependent"] .food-hub-result__status { --tone: #c4b5fd; }
.dark [data-status="scholarly-difference"] .food-hub-result__status { --tone: #fbbf24; }

/* —— Pagination: one row —— */
.food-hub-pagination {
  align-items: center;
  margin-top: 2rem;
}

.food-hub-pagination > span {
  order: 4;
  margin-inline-start: 0.5rem;
}

.food-hub-pagination > div {
  order: 2;
  width: auto !important;
  margin-top: 0 !important;
}

.food-hub-pagination > a:last-of-type {
  order: 3;
}

.food-hub-pagination a {
  border-radius: 0.6rem !important;
}

/* —— Photo credits (CC BY attribution) —— */
.hub-credits {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
}

.hub-credits summary {
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
}

.hub-credits__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.hub-credits a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: hsl(var(--muted-foreground) / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .food-hub-result,
  .food-hub-result:hover {
    transform: none;
  }
}

/* ================================================================
   Brand band hero (same language as the homepage and /scan/):
   deep green, white type, the mosaic floating on it.
   ================================================================ */
.hub-hero {
  background:
    radial-gradient(45% 70% at 88% 15%, rgba(255, 255, 255, 0.12), transparent 70%),
    linear-gradient(160deg, var(--brand-deep) 0%, var(--brand-deeper) 100%);
  color: #fff;
}

.hub-hero h1,
.hub-hero .text-primary,
.hub-hero .text-primary\/80,
.hub-hero .text-foreground,
.hub-hero .text-foreground\/90 {
  color: #fff;
}

.hub-hero .text-muted-foreground,
.hub-hero p {
  color: rgba(255, 255, 255, 0.88);
}

.hub-hero nav,
.hub-hero nav a,
.hub-hero nav span {
  color: rgba(255, 255, 255, 0.8);
}

.hub-hero nav a:hover {
  color: #fff;
}

.hub-hero a.food-hub-topics-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Guide tips read as white on the green */
.hub-hero .food-hub-guide__item {
  align-items: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.7rem;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.07);
}

/* The tick and cross are primary and destructive on a tint of themselves,
   which vanishes on the green band; set them on white instead. */
.hub-hero .food-hub-guide__item .food-hub-guide__mark {
  margin-top: 0;
  background: #fff;
  color: var(--brand-deep);
}

.hub-hero .food-hub-guide__item--dont .food-hub-guide__mark {
  color: #b91c1c;
}

/* Search: one white control with a shadow */
.hub-hero form input {
  border-color: transparent;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
}

.hub-hero form button[type="submit"] {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.55);
}

.hub-hero form button[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.92);
}

.hub-mosaic__tile {
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.55);
}

@media (min-width: 1024px) {
  .hub-mosaic__tile {
    border: 5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.6);
  }
}

/* The section under the band no longer needs its own top rule */
.hub-hero + .hub-status {
  border-top: 0;
}

/* —— A–Z jump bar (full library) —— */
.hub-az {
  margin: 0 0 1.5rem;
}

.hub-az__label {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

.hub-az__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-az__link {
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.4rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.6rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.hub-az__link:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
}

.hub-az__link.is-here {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

@media (max-width: 639px) {
  .hub-az__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -1.5rem;
    padding: 0 1.5rem 0.3rem;
    scrollbar-width: none;
  }

  .hub-az__list::-webkit-scrollbar {
    display: none;
  }

  .hub-az__list li {
    flex-shrink: 0;
  }
}