/*
 * Botanical QR-page template (Le Jardin Secret).
 * Reproduces the supplied "botanical-plate" layout (colors, typography,
 * arch illustration, circular gallery + lightbox, a desktop layout that
 * comfortably fits one screen for normal content and reflows to a
 * scrolling single column on mobile) and wires it to the real plant admin
 * data instead of the sample Rose content. The description is always
 * shown in full (no excerpt/"read more" dialog) - the page simply grows
 * and scrolls for longer text instead of truncating it.
 *
 * Scoped entirely under .botanical-page (only present on <body> when
 * $_GET['option'] === 'com_plante', see includes/template.php) so it can
 * never affect any other page.
 *
 * One addition not in the supplied layout: a ".photo" variant of the arch
 * figure. The supplied design only ever shows a transparent illustration
 * cutout floating over the arch outline (object-fit: contain); real plant
 * photographs need to be cropped to fill the same arch silhouette instead
 * (object-fit: cover) so they don't float awkwardly inside an empty frame.
 * Which mode applies is decided server-side per photo, see detail.php.
 */

.botanical-page {
  --cream: #f6f2e8;
  --cream-soft: #efe9da;
  --forest: #24403a;
  --forest-deep: #1a2e29;
  --ink: #2c443d;
  --gilt: #b08d57;
  --gilt-soft: #c9ab7a;
  --parchment: #ece2cc;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", Futura, sans-serif;

  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.botanical-page * {
  box-sizing: border-box;
}
.botanical-page button {
  font: inherit;
  cursor: pointer;
}
.botanical-page button:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
}

/* ---------- logo (+ optional language switch), directly over the
   patterned background - no separate coloured bar ---------- */
.botanical-page-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 24px 88px 12px;
}
.botanical-page-logo .logo {
  display: inline-block;
  line-height: 0;
}
.botanical-page-logo .logo img {
  height: 10vw;
  width: auto;
  display: block;
  background: none;
  border: none;
  box-shadow: none;
}
.botanical-page-logo .lang {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}
.botanical-page-logo .lang a {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink);
  opacity: .65;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--gilt);
  border-radius: 999px;
  min-width: 34px;
  text-align: center;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.botanical-page-logo .lang a.active,
.botanical-page-logo .lang a:hover,
.botanical-page-logo .lang a:focus-visible {
  background: var(--gilt);
  color: var(--cream);
  opacity: 1;
}

/* ---------- draft preview banner ---------- */
.botanical-page-draft-banner {
  flex-shrink: 0;
  background: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
  text-align: center;
  font-size: 13px;
  padding: 6px 16px;
  font-family: var(--font-body);
}

/* ---------- Plate ----------
   min-height (not a fixed height+overflow:hidden): fills the screen and
   centres its content vertically for a normal-length description, but
   never clips anything. A longer description (or a very short/wide
   window, large browser zoom, unusually long name) simply makes the card
   taller than one viewport, and the page scrolls - it never cuts content
   off. Only the small decorative arch is ever clipped, and only to its
   own figure - see .plate-figure below. */
.botanical-page .plate {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.botanical-page .texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: repeating-radial-gradient(
    circle at 70% 45%,
    currentColor 0 1px,
    transparent 1px 14px
  );
}

.botanical-page .watermark {
  position: absolute;
  right: 3rem;
  bottom: 4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(4.5rem, 10vw, 9rem);
  opacity: 0.1;
  pointer-events: none;
  line-height: 1;
}
.botanical-page .watermark:empty {
  display: none;
}

.botanical-page .plate-inner {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 3.5rem 0.5rem;
}

.botanical-page .plate-grid {
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

/* No photo: collapse to a single, slightly narrower centred column
   instead of leaving an empty grid track where the figure would be. */
.botanical-page .plate-grid.no-image {
  grid-template-columns: minmax(0, 1fr);
  max-width: 40rem;
}
.botanical-page .plate-grid.no-image .plate-text {
  margin: 0 auto;
}

/* ---------- Text column ---------- */

/* Order on the plant page: latin name, then name, then garden */
.botanical-page .plate-kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 1rem 0 0;
}
.botanical-page .plate-kicker:empty {
  display: none;
}

.botanical-page .plate-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0;
  text-wrap: balance;
  line-height: 1.05;
}

.botanical-page .plate-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  opacity: 0.8;
  margin: 0;
}
.botanical-page .plate-latin[hidden] {
  display: none;
}

.botanical-page .plate-description {
  margin: 1.5rem 0 0;
  max-width: 30rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(44, 68, 61, 0.75);
  white-space: pre-line;
}
.botanical-page .plate-description:empty {
  display: none;
}

.botanical-page .plate-facts {
  margin-top: 1.75rem;
  max-width: 30rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
}
.botanical-page .plate-facts[hidden] { display: none; }
.botanical-page .plate-facts dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
}
.botanical-page .plate-facts dd {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  margin: 0.25rem 0 0;
}

/* ---------- Illustration column ---------- */

.botanical-page .plate-figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  /* Scoped clip: the decorative arch (and, in photo mode, the cropped
     photo) must never paint or extend outside its own small image area -
     but nothing outside this figure is ever clipped. */
  overflow: hidden;
}
.botanical-page .plate-figure[hidden] { display: none; }

.botanical-page .arch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  aspect-ratio: 3 / 4.2;
  border: 1px solid rgba(176, 141, 87, 0.7);
  border-radius: 999px 999px 999px 999px;
}
/* Photo mode: the arch must switch from width-based to height-based
   sizing so it always matches the (height-based, see below) cropped
   photo box exactly - otherwise the two are computed independently and
   only line up by coincidence at any given viewport width. */
.botanical-page .plate-figure.photo .arch {
  width: auto;
  height: 100%;
}

/* Illustration (default) mode: display:contents removes this wrapper's own
   box entirely, so <img class="plate-image"> lays out exactly as if it were
   still a direct child of .plate-figure - unclipped, uncropped, same as
   before this wrapper existed. There is nothing to round here (a floating
   transparent cutout, sized by object-fit: contain, never fills a hard-
   edged box), so there is no capsule for a wrapper to own. */
.botanical-page .plate-image-wrap {
  display: contents;
}

/* The clickable capsule photo: a real <button> (keyboard/tap accessible,
   cursor: zoom-in) wrapping <img class="plate-image">. In illustration mode
   the wrapper above is display:contents, so this button - sized to hug the
   image, same as the old unwrapped <img> did - is the thing .plate-figure's
   flex layout actually lays out and stacks above .arch (hence position/
   z-index living here, not on the image any more). */
.botanical-page .plate-image-trigger {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}

.botanical-page .plate-image {
  width: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.2));
  transform: scale(1);
  transition: transform 400ms ease-out;
}
.botanical-page .plate-image[hidden] { display: none; }

/* Gentle hover zoom: hovering anywhere in the capsule frame (.plate-figure)
   scales only the <img> - never the wrapper/button/arch, so a rounded
   capsule's ends stay put and never crack/flicker mid-animation.
   (hover: hover) keeps this off touch devices, where hover can otherwise
   get "stuck". */
@media (hover: hover) {
  .botanical-page .plate-figure:hover .plate-image {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .botanical-page .plate-image {
    transition: none;
    transform: none;
  }
}

/* Photo mode: the wrapper becomes the actual capsule and is the ONLY thing
   that rounds/clips/shadows the photo - a fixed box that the hover zoom
   never touches. The <img> inside just fills it (object-fit: cover) and is
   the only element that scales. Previously border-radius + box-shadow +
   filter + transform all lived together on the <img> itself; that
   combination is exactly what makes rounded corners crack/square off
   mid-transform in some browsers (a filter forces its own compositing
   layer, which can fight the border-radius clip while it's being
   transformed) - splitting "the box that clips" from "the thing that
   scales" across two elements is the fix. */
.botanical-page .plate-figure.photo .plate-image-wrap {
  display: block;
  position: relative;
  width: auto;
  height: 62vh;
  max-height: 62vh;
  aspect-ratio: 3 / 4.2;
  border-radius: 9999px;
  overflow: hidden;
}
/* The trigger button fills the whole capsule (not just the image's own
   content box) so the entire visible photo is clickable/tappable. */
.botanical-page .plate-figure.photo .plate-image-trigger {
  position: static;
  width: 100%;
  height: 100%;
}
/* Photo mode: crop a real photograph to fill the same arch silhouette
   instead of floating it, unclipped, over an empty frame. Stays in normal
   flow (like the illustration mode) rather than position:absolute - an
   absolutely positioned image has no intrinsic box, which would collapse
   .plate-figure's height to zero and break the grid row's vertical
   centring against the text column. */
.botanical-page .plate-figure.photo .plate-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

/* ---------- Floating gallery ---------- */

.botanical-page .gallery {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.botanical-page .gallery[hidden] { display: none; }

.botanical-page .gallery-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  padding: 0.75rem 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.botanical-page .gallery-track::-webkit-scrollbar { display: none; }

.botanical-page .gallery-item { flex-shrink: 0; scroll-snap-align: center; }

.botanical-page .gallery-thumb {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(176, 141, 87, 0.6);
  box-shadow: 0 10px 20px -8px rgba(60, 50, 20, 0.45);
  padding: 0;
  background: none;
  transition: transform 0.3s, border-color 0.3s;
}
.botanical-page .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.botanical-page .gallery-thumb:hover,
.botanical-page .gallery-thumb:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gilt);
  outline: 1px solid var(--forest);
  outline-offset: 2px;
}

/* ---------- Lightbox ---------- */

.botanical-page .lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 46, 41, 0.85);
  backdrop-filter: blur(4px);
}
.botanical-page .lightbox[hidden] { display: none; }

.botanical-page .lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 85dvh;
  object-fit: contain;
  border-radius: 0;
  transform: none;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.botanical-page .lightbox-image[hidden] { display: none; }

.botanical-page .lightbox-counter {
  margin-top: 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(236, 226, 204, 0.8);
}

.botanical-page .lightbox-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(236, 226, 204, 0.4);
  background: none;
  color: var(--parchment);
  font-size: 1.25rem;
  transition: background 0.2s;
}
.botanical-page .lightbox-btn:hover { background: rgba(236, 226, 204, 0.1); }
.botanical-page .lightbox-btn[hidden] { display: none; }

.botanical-page .lightbox-close { top: 1.25rem; right: 1.25rem; }
.botanical-page .lightbox-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.botanical-page .lightbox-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .botanical-page-logo { padding: 16px 60px 8px; }
  .botanical-page-logo .logo img { height: 84px; }

  /* Compact on mobile: don't force the card to fill (and centre content
     within) a full 100dvh - that's what leaves huge empty gaps above and
     below short content (e.g. a plant with no photo). Let the card size
     itself to its actual content instead, scrolling only if genuinely
     needed. */
  .botanical-page .plate { min-height: 0; }

  .botanical-page .plate-inner { padding: 1.5rem 1.5rem 1rem; }

  .botanical-page .plate-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* illustration first, text below */
  .botanical-page .plate-figure { order: 1; }
  .botanical-page .plate-text { order: 2; }

  .botanical-page .plate-image { max-height: 32vh; }
  .botanical-page .plate-figure.photo .plate-image-wrap { height: 32vh; max-height: 32vh; }

  .botanical-page .plate-name { margin-top: 0.25rem; font-size: clamp(2rem, 8vw, 2.75rem); }
  .botanical-page .plate-kicker { margin-top: 0.75rem; }
  .botanical-page .plate-latin { font-size: 1.0625rem; }

  .botanical-page .plate-description { margin-top: 0.85rem; font-size: 0.875rem; }
  .botanical-page .plate-facts { margin-top: 1.1rem; gap: 1rem; }
  .botanical-page .plate-facts dd { font-size: 1rem; }

  .botanical-page .watermark { right: 1.25rem; bottom: 6rem; font-size: 4.5rem; }

  .botanical-page .texture {
    background-image: repeating-radial-gradient(
      circle at 0% 0%,
      currentColor 0 1px,
      transparent 1px 14px
    );
  }

  .botanical-page .gallery-thumb { width: 52px; height: 52px; }

  .botanical-page .lightbox-image { max-width: 94vw; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .botanical-page .plate-image { max-height: 50vh; }
  .botanical-page .plate-figure.photo .plate-image-wrap { height: 50vh; max-height: 50vh; }
}

/* Short landscape screens: keep everything visible without scrolling */
@media (max-height: 560px) {
  .botanical-page .plate-inner { padding-top: 0.75rem; }
  .botanical-page .plate-image { max-height: 42vh; }
  .botanical-page .plate-figure.photo .plate-image-wrap { height: 42vh; max-height: 42vh; }
  .botanical-page .plate-description { margin-top: 0.65rem; }
  .botanical-page .plate-facts { margin-top: 0.85rem; }
  .botanical-page .gallery-thumb { width: 46px; height: 46px; }
  .botanical-page .gallery-track { padding-top: 0.25rem; padding-bottom: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .botanical-page * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- not found (kept visually consistent with the card) ---------- */
.botanical-notfound {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream, #f6f2e8);
}
.botanical-notfound__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.botanical-notfound__inner {
  max-width: 420px;
}
.botanical-notfound__inner h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--ink, #2c443d);
  font-size: 34px;
  margin: 0 0 14px;
}
.botanical-notfound__inner p {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--ink, #2c443d);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.botanical-notfound__link {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--gilt, #b08d57);
  border-radius: 999px;
  color: var(--ink, #2c443d);
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.botanical-notfound__link:hover,
.botanical-notfound__link:focus-visible {
  background: var(--gilt, #b08d57);
  color: var(--cream, #f6f2e8);
}

/* =====================================================================
   Plant index (/plantes/, components/com_plante/views/plante/list.php)
   Same palette, type and capsule/arch motif as a single plant plate,
   arranged as a searchable grid. The language pills reuse the panel
   pages' .lang-pill markup (css/style.css) re-skinned for the cream
   background.
   ===================================================================== */

.botanical-page .plant-list {
  position: relative;
  min-height: 100dvh;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

.botanical-page .plant-list-head {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 0;
  text-align: center;
}

/* ---------- language pills (panel-page selector, cream skin) ---------- */
.botanical-page .plant-list-lang {
  display: inline-flex;
  max-width: 100%;
  margin: 1.75rem auto 0;
  padding: 5px;
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(176, 141, 87, 0.45);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(36, 64, 58, 0.45);
}
.botanical-page .plant-list-lang::-webkit-scrollbar { display: none; }

.botanical-page .plant-list-lang .lang-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  scroll-snap-align: center;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .botanical-page .plant-list-lang .lang-pill:hover { background: rgba(176, 141, 87, 0.12); }
}
.botanical-page .plant-list-lang .lang-pill:active { transform: scale(0.97); }
.botanical-page .plant-list-lang .lang-pill.active {
  background: var(--gilt);
  box-shadow: 0 2px 10px rgba(176, 141, 87, 0.35);
}
.botanical-page .plant-list-lang .lang-flag img {
  width: 24px;
  height: 15px;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.botanical-page .plant-list-lang .lang-name {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: inherit;
}
.botanical-page .plant-list-lang .lang-pill.active .lang-name {
  color: var(--forest-deep);
  font-weight: 500;
}

/* ---------- search ---------- */
.botanical-page .plant-list-search {
  max-width: 30rem;
  margin: 1.75rem auto 0;
  text-align: start;
}
.botanical-page .plant-list-search-label {
  display: block;
  margin: 0 0 0.5rem;
  text-align: center;
  /* letter-spacing also adds space after the last letter: indent by the
     same amount so the label is optically centred over the field */
  text-indent: 0.3em;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(44, 68, 61, 0.8);
}
.botanical-page[dir="rtl"] .plant-list-search-label,
.botanical-page .plant-list[dir="rtl"] .plant-list-search-label {
  letter-spacing: 0;
  text-indent: 0;
}
.botanical-page .plant-list-search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.botanical-page .plant-list-search-field .fa-magnifying-glass {
  position: absolute;
  inset-inline-start: 1.25rem;
  font-size: 0.9rem;
  color: var(--gilt);
  pointer-events: none;
}
.botanical-page .plant-list-search-field input {
  width: 100%;
  height: 3.25rem;
  padding: 0 3rem 0 3rem;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px: no iOS zoom on focus */
  font-weight: 400;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(176, 141, 87, 0.55);
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.botanical-page .plant-list-search-field input::placeholder { color: rgba(44, 68, 61, 0.55); }
.botanical-page .plant-list-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.botanical-page .plant-list-search-field input:focus {
  background: #fffdf8;
  border-color: var(--gilt);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.22);
}
.botanical-page .plant-list-search-clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}
@media (hover: hover) {
  .botanical-page .plant-list-search-clear:hover { background: rgba(176, 141, 87, 0.15); }
}
.botanical-page .plant-list-search-clear[hidden] { display: none; }

/* ---------- garden filter ---------- */
.botanical-page .plant-list-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.botanical-page .plant-list-chip {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(176, 141, 87, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8125rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) {
  .botanical-page .plant-list-chip:hover { background: rgba(176, 141, 87, 0.12); }
}
.botanical-page .plant-list-chip:active { transform: scale(0.97); }
.botanical-page .plant-list-chip.active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

/* ---------- grid ---------- */
.botanical-page .plant-list-body {
  position: relative;
  max-width: 82rem;
  margin: 0 auto;
  padding: 2rem 3.5rem 0;
}

.botanical-page .plant-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Fixed number of columns (5 on desktop); auto-fit collapses unused
     tracks so a short list (fewer plants than columns) stays centred. */
  --cols: 5;
  --gap-x: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)));
  justify-content: center;
  gap: 3rem var(--gap-x);
}

.botanical-page .plant-card[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .botanical-page .plant-card {
    animation: plant-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
}
@keyframes plant-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.botanical-page .plant-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink);
  text-decoration: none;
  border-radius: 1.5rem;
}
.botanical-page .plant-card-link:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 6px;
}

/* capsule photo inside an offset gilt arch, echoing the plant plate */
.botanical-page .plant-card-figure {
  position: relative;
  display: block;
  width: 86%;
  aspect-ratio: 3 / 4.2;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--cream-soft);
  box-shadow: 0 22px 36px -24px rgba(26, 46, 41, 0.55);
  isolation: isolate;
}
.botanical-page .plant-card-figure::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(246, 242, 232, 0.65);
  border-radius: inherit;
  pointer-events: none;
}
.botanical-page .plant-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  transform: scale(1);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.botanical-page .plant-card-figure.is-empty {
  display: grid;
  place-items: center;
  border: 1px solid rgba(176, 141, 87, 0.7);
  box-shadow: none;
}
.botanical-page .plant-card-figure.is-empty::after { display: none; }
.botanical-page .plant-card-initial {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4rem;
  color: var(--gilt);
  opacity: 0.8;
}

@media (hover: hover) {
  .botanical-page .plant-card-link:hover .plant-card-figure img { transform: scale(1.05); }
  .botanical-page .plant-card-link:hover .plant-card-name { color: var(--forest); }
}

.botanical-page .plant-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.25rem;
  padding: 0 0.25rem;
}
/* Same order as the plant page: latin name, then name, then garden */
.botanical-page .plant-card-kicker {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.7;
}
.botanical-page .plant-list[dir="rtl"] .plant-card-kicker { letter-spacing: 0; }
.botanical-page .plant-card-name {
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.15;
  text-wrap: balance;
  transition: color 0.2s ease;
}
.botanical-page .plant-card-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.25;
  padding-bottom: 2px;
  opacity: 0.8;
}
.botanical-page .plant-card-draft {
  margin-top: 0.6rem;
  padding: 0.15rem 0.7rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 999px;
}

/* ---------- empty state ---------- */
.botanical-page .plant-list-empty {
  max-width: 26rem;
  margin: 1rem auto 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.botanical-page .plant-list-empty[hidden] { display: none; }
.botanical-page .plant-list-empty p {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.35;
}
.botanical-page .plant-list-empty .botanical-notfound__link { background: transparent; }

/* ---------- plant index: tablet / mobile ---------- */
@media (max-width: 1024px) {
  .botanical-page .plant-list-body { padding: 2rem 2rem 0; }
  .botanical-page .plant-grid { --cols: 3; --gap-x: 1.75rem; row-gap: 2.5rem; }
}

@media (max-width: 767px) {
  .botanical-page .plant-list-head { padding: 0.5rem 16px 0; }

  /* 8 pills never fit a phone: the bar spans the full width and scrolls */
  .botanical-page .plant-list-lang {
    display: flex;
    margin-top: 1.25rem;
    justify-content: flex-start;
  }
  .botanical-page .plant-list-lang .lang-pill { padding: 0.45rem 0.8rem; }

  .botanical-page .plant-list-search { margin-top: 1.25rem; }

  .botanical-page .plant-list-body { padding: 1.5rem 16px 0; }
  .botanical-page .plant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
  .botanical-page .plant-card-figure { width: 88%; }
  .botanical-page .plant-card-text { margin-top: 0.85rem; }
  .botanical-page .plant-card-kicker { font-size: 0.5625rem; letter-spacing: 0.24em; }
  .botanical-page .plant-card-name { font-size: 1.1875rem; }
  .botanical-page .plant-card-latin { font-size: 0.9375rem; }
  .botanical-page .plant-card-initial { font-size: 3rem; }
}

/* =====================================================================
   Plant detail page: "back to the list" link + language selector
   (components/com_plante/views/plante/_topbar.php and _langbar.php)
   ===================================================================== */

.botanical-back {
  position: relative;
  z-index: 2;
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* space between the button and the plate content below */
  margin: 1rem auto 1.75rem;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(176, 141, 87, 0.7);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.botanical-back i {
  font-size: 0.8rem;
  color: var(--gilt);
  transition: color 0.2s ease, transform 0.2s ease;
}
.botanical-back:focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 3px;
}
@media (hover: hover) {
  .botanical-back:hover {
    background: var(--gilt);
    border-color: var(--gilt);
    color: var(--cream);
  }
  .botanical-back:hover i {
    color: var(--cream);
    transform: translateX(-2px);
  }
}
.botanical-back:active { transform: scale(0.97); }

.botanical-page .plant-lang--detail {
  position: relative;
  z-index: 2;
  align-self: center;
  flex-shrink: 0;
  max-width: calc(100% - 32px);
  margin: 0.25rem auto 0;
}

@media (max-width: 767px) {
  .botanical-back { margin: 0.85rem auto 0.5rem; }
  .botanical-page .plant-lang--detail {
    display: flex;
    align-self: stretch;
    max-width: none;
    margin: 0.25rem 16px 0;
  }
}

/* The language bar + back button add ~120px above the plate: on desktop, take that
   height back from the spacing and the photo so a plant still fits one
   screen (logo, selector, plate and gallery) like before. */
@media (min-width: 1025px) {
  .botanical-page .plate:has(.plant-lang--detail) .botanical-page-logo { padding-top: 16px; padding-bottom: 4px; }
  .botanical-page .plant-lang--detail ~ .plate-inner { padding-top: 0.5rem; }
  .botanical-page .plant-lang--detail ~ .plate-inner .plate-image { max-height: calc(62vh - 104px); }
  .botanical-page .plant-lang--detail ~ .plate-inner .plate-figure.photo .plate-image-wrap {
    height: calc(62vh - 104px);
    max-height: calc(62vh - 104px);
  }
}