/* ==========================================================================
   info-panel.css — overlay modal for info hotspot content.

   Layout adapted from the Christeyns tour (text/image positioning +
   media-aware width, which still scale with the viewport above 900px).
   Open/close animation, close-button behavior and title styling are Oleon's
   original.

   TYPE SCALE — shared by every modal (info panel, video lightbox, about
   panel). Fixed px, not viewport units, so the same text is the same size
   whichever modal a visitor happens to open:

       18px  modal title
       15px  sub-heading / call-to-action button
       14px  body copy
       12px  caption, eyebrow, disclaimer
   ========================================================================== */

#info-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#info-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#info-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Panorama background - no blur */
#pano {
  transition: filter 0.3s ease;
}

/* ── Card ─────────────────────────────────────────────────────────────────
   Default = text-only: narrow. `.has-media` widens it (set from InfoPanel.js). */
#info-panel__card {
  position: relative;
  width: 90%;
  /* Text-only cards (no image) were tuned narrow, assuming short blurbs —
     but some infodots (e.g. EcoVadis) carry several paragraphs and a bullet
     list, which reads cramped and forces a lot of scrolling at 460px. Widen
     the text-only default; media cards are unaffected (.has-media below). */
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
  padding: 36px;
  transform: translateY(16px);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.36, 1);
}

#info-panel__card.has-media {
  max-width: 900px;
}

#info-panel.is-visible #info-panel__card {
  transform: translateY(0);
}

/* Header row — title + close aligned center */
#info-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#info-panel__title {
  margin: 0;
  /* Duration must match FADE_MS in InfoPanel.js. */
  transition: opacity 0.16s ease;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-oleon);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

#info-panel__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgb(var(--color-oleon-rgb) / 0.08);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
}

#info-panel__close:hover {
  background: rgb(var(--color-oleon-rgb) / 0.15);
  transform: scale(1.1);
}

#info-panel__close svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-oleon);
  stroke-width: 2.5;
}

/* ── Content — text + image ──────────────────────────────────────────────
   Mobile: column, image on top. Desktop: row, side by side. */
#info-panel__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

/* Text column — the copy plus the pager beneath it. This is the flex child;
   the body inside it is just prose. */
#info-panel__text {
  flex: 1;
  min-width: 0;
  order: 2;              /* below the image on mobile */
  display: flex;
  flex-direction: column;
}

/* Body text */
#info-panel__body {
  margin: 0;
  transition: opacity 0.16s ease;
  font-size: 14px;
  line-height: 1.75;
  color: #555;
}

#info-panel__body p {
  margin: 0 0 12px;
}

#info-panel__body p:last-child {
  margin-bottom: 0;
}

#info-panel__body strong {
  color: #333;
  font-weight: 700;
}

#info-panel__body ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

#info-panel__body ul li {
  margin-bottom: 4px;
}

/* Remove the gap between "including:" paragraph and the bullet list */
#info-panel__body p + ul {
  margin-top: -8px;
}

/* ── Image column ────────────────────────────────────────────────────────
   Width-driven and never cropped: the box takes its share of the row width,
   the photo fills that width and takes its natural height.

   This only stays balanced because the TYPE scales with the viewport too (see
   the >=900px block). With fixed-px text the column grew taller than the photo
   as the window narrowed, which is what left dead space under it.

   Do not add `object-fit: cover`, a fixed height, or an aspect-ratio here —
   each of those crops the photo. */
#info-panel__image {
  flex: 1 1 0;             /* equal share of the row width with the text */
  min-width: 0;
  order: 1;                /* above the text on mobile */
  align-self: flex-start;  /* hug the photo; don't stretch to the text */
  overflow: hidden;
  border-radius: 12px;
}

#info-panel__image img {
  display: block;
  width: 100%;
  height: auto;            /* natural aspect ratio */
  border-radius: 12px;
}

/* Held at 0 while the pager swaps pages, so the copy cross-fades instead of
   repainting instantly. Driven by InfoPanel._go(). */
#info-panel__title.is-swapping,
#info-panel__body.is-swapping {
  opacity: 0;
}

/* ── Pager ───────────────────────────────────────────────────────────────
   Only rendered when the panel was opened with more than one page. Sits under
   the content, centred, styled to match the panel's own chrome rather than
   the bottom-bar nav — this belongs to the modal, not to the tour. */
#info-panel__pager {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Directly under the copy, aligned to its left edge — it belongs to the
     text column, not to the card. */
  margin-top: 22px;
}
#info-panel__pager.hidden {
  display: none;
}

#info-panel__prev,
#info-panel__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(var(--color-oleon-rgb) / 0.08);
  color: var(--color-oleon);
  cursor: pointer;
  transition: background 0.2s ease;
}
#info-panel__prev:hover,
#info-panel__next:hover {
  background: rgb(var(--color-oleon-rgb) / 0.16);
}
#info-panel__prev svg,
#info-panel__next svg {
  width: 15px;
  height: 15px;
}

#info-panel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-panel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(var(--color-oleon-rgb) / 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.info-panel__dot:hover {
  background: rgb(var(--color-oleon-rgb) / 0.4);
}
.info-panel__dot.active {
  background: var(--color-oleon);
  transform: scale(1.25);
}

/* ── QR link button ────────────────────────────────────────────────────── */
.info-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  margin-top: 16px;
  padding: 9px 36px;
  /* Sub-heading step, not body: this is the panel's one call to action (the
     QR/link button) and sat at 16px, between the 18px title and 14px body
     for no reason. 15px keeps it a step above the prose it follows. */
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  border: 2px solid #5e8a73;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(90deg, #5e8a73 0%, #5e8a73 50%, transparent 50%, transparent 100%);
  background-size: 400% 100%;
  background-position: 0% 0%;
  transition: background-position 0.35s ease-in-out, color 0.35s ease-in-out;
}

.info-panel__btn:hover {
  background-position: 100% 0%;
  color: #5e8a73;
}

.info-panel__btn .button-icon {
  display: flex;
  align-items: center;
}

.info-panel__btn .button-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── Desktop (≥900px): row layout + vw scaling ─────────────────────────────
   Everything scales with the viewport, matching the competitor's approach. */
@media (min-width: 900px) {
  #info-panel__card {
    /* Widened from 30vw to give text-heavy, image-less infodots (e.g. the
       EcoVadis card) more breathing room — long paragraphs otherwise wrap
       into a tall, narrow column that scrolls a lot. */
    max-width: 42vw;
    padding: 2.4vw;
  }

  #info-panel__card.has-media {
    max-width: 60vw;
  }

  #info-panel__header {
    margin-bottom: 1.8vw;
  }

  /* TYPE SCALES WITH THE VIEWPORT HERE — on purpose, and it is load-bearing.

     Everything else about this card is already viewport-relative (max-width
     42/60vw, padding 2.4vw, gap 2.4vw). Pinning the type to a fixed px while
     the box scales is what broke the layout on resize: narrowing the window
     shrank the card but not the text, so the same paragraph went from ~6 to
     ~16 lines, the text column grew far taller than the photo, and the photo
     was left stranded in a tall column with dead space under it.

     With the type scaling too, every part of the card shrinks together and
     the layout looks the same at any width — which is exactly how the
     Christeyns modal behaves (.85vw body, 1.8vw padding, 50vw card).

     This is the one deliberate exception to the fixed TYPE SCALE noted at the
     top of the file. The video lightbox and about panel keep fixed px because
     their boxes are fixed too. */
  #info-panel__title {
    font-size: 1.3vw;
  }

  /* Side-by-side 50/50: text left, image right */
  #info-panel__content {
    flex-direction: row;
    gap: 2.4vw;
    align-items: stretch;   /* both columns same height */
  }

  #info-panel__text {
    flex: 1 1 0;
    order: 0;
  }

  #info-panel__body {
    font-size: 0.95vw;
  }

  /* The photo fills the row's full height, and the COLUMN WIDTH follows from
     its aspect ratio — `flex: 0 0 auto`, not a fixed 1 1 0 share.

     That is the whole fix. With a fixed 50% column the photo could only fill
     the height by cropping (object-fit: cover, the committed behaviour) or by
     leaving dead space beside/below it (what the portrait branch did — ~160px
     of empty card under the image on a narrow window, against ~25px in the
     Christeyns modal). Letting the width follow the height means it fills
     exactly, with no crop and no gap, at any window size.

     The text column keeps `flex: 1 1 0`, so it simply takes whatever is left. */
  #info-panel__image {
    flex: 1 1 0;
    order: 1;
  }



}

/* ── Below 900px: bottom sheet ────────────────────────────────────────────
   Mirrors the Christeyns modal (their app.a2a2360b.css, `html{font-size:62.5%}`
   so their rems are x10 — 3.6rem = 36px, .4rem = 4px):

     .modal__inner            bottom:0; width:100%; height:auto; max-height:75%
     .modal__inner.-has-media height:100%; max-height:100%
     .modal__content__inner   flex-direction:column; justify-content:space-between; gap:3.6rem
     .modal__content__inner>div  flex:1          <- text and media split the height
     .text                    order:1            <- media first, text second
     .img__wrapper.-single img object-fit:cover; height:100%; width:100%

   The `flex: 1` on both children is the part that makes their sheet work: in
   the full-height media state the photo and the text take half each, and the
   photo fills its half with `cover`. */
@media (max-width: 899.98px) {
  #info-panel {
    padding: 0;
    align-items: flex-end;   /* sheet sits on the bottom edge */
  }

  #info-panel__card {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 75%;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
    padding: 36px 20px max(36px, env(safe-area-inset-bottom)) 20px;
    /* No slide. The sheet fades in and out with the same 16px nudge the
       centred card uses at every other width — inherited from the base rule,
       so nothing is overridden here. A translateY(100%) slide was tried and
       dropped: it also plays in reverse on close, and the panel's 0.3s opacity
       fade finishes before the 0.35s travel does, so the sheet went
       transparent halfway down. */
  }

  #info-panel__card.has-media {
    height: 100%;
    max-height: 100%;
    padding-top: max(36px, env(safe-area-inset-top));
  }


  #info-panel__content {
    gap: 36px;
  }

  /* Stacked: there's no row height to fill, so the photo goes back to being
     width-driven — full card width, natural height, still never cropped. */
  #info-panel__image {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
  }

  #info-panel__image img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  #info-panel__text {
    order: 2;
    flex: 0 0 auto;
  }
}