/* ============================================================================
   liranhaber.com — Playground stylesheet
   v6  ·  upload to HubSpot File Manager as: playground-v6.css
          (pairs with playground-v4.js — the behaviour file is unchanged)
   v6 fixes: logos were being stretched to 190x44 regardless of their real
             shape, because the card is a column flex container and its children
             stretch on the cross axis. See "ASPECT RATIO, THE HARD WAY" below.
   v2 added: click-to-load placeholders for permission-requesting widgets.
   v3 added: tab-button icons and the secondary (per-tab vendor) nav.
   v5 adds: height-capped vendor logos, and .pg-figure for content images.
            Ships alongside a cleanup of the inline styles that were overriding
            .pg-logo in ~46 modules — the CSS must be live FIRST, or those
            modules briefly fall back to a width cap.

   VERSIONING IS MANDATORY.
   hubfs serves assets with Cache-Control: public, max-age=1209600 (14 days).
   Overwriting this file in place means visitors keep the stale copy for up to
   a fortnight. To change anything: save as playground-v6.css, upload as a NEW
   file, and update the <link> on the pages. Never overwrite.

   RULES THIS FILE OBEYS (learned the hard way):
   1. Never style the inside of a third-party widget. Vendors randomise their
      ids/classes per page load (Boei was bqf07y then bb07is), so any such
      selector is guaranteed to rot.
   2. Never rely on CSS to hide site-wide chrome (chat, cookie banner). HubSpot
      chat sets inline styles that beat !important. Those are switched off in
      the relevant tool's settings, not here.
   3. No fixed pixel heights for embeds — see the aspect-ratio section.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens - */
:root {
  --pg-brand:        #1595c8;
  --pg-brand-dark:   #0d7ba6;
  --pg-brand-tint:   #f2f9fd;
  --pg-ink:          #1f2933;
  --pg-ink-soft:     #3d4750;
  --pg-ink-faint:    #6b7680;
  --pg-line:         #e3e8ec;
  --pg-surface:      #ffffff;
  --pg-radius:       10px;
  --pg-radius-pill:  999px;
  --pg-gap:          22px;
  --pg-shadow:       0 1px 3px rgba(0,0,0,.06);
  --pg-shadow-lift:  0 6px 18px rgba(0,0,0,.10);
  --pg-card-min:     330px;   /* grid breakpoint driver — see .pg-grid */
}

/* ------------------------------------------------------------------ hero - */
.pg-hero h1      { margin: 0 0 10px; line-height: 1.15; }
.pg-hero p       { margin: 0 0 6px; line-height: 1.45; }

.pg-cta-banner   { margin: 14px 0 4px; padding: 12px 16px; border-radius: 6px;
                   background: var(--pg-brand-tint);
                   border-left: 4px solid var(--pg-brand); }
.pg-cta-banner p           { margin: 0; font-weight: 600; color: #0d5c7d; }
.pg-cta-banner p + p       { margin-top: 2px; font-weight: 500; }

.pg-legal        { font-size: 13px; line-height: 1.4; color: var(--pg-ink-faint); }
.pg-legal strong { color: #444; }

/* ------------------------------------------------------------ tab nav bar - */
/* Sticky so category switching is always one click away, at any scroll depth. */
.pg-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 8px 0 18px; padding: 10px 6px;
  background: var(--pg-surface);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}
.pg-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border: 2px solid var(--pg-brand); border-radius: var(--pg-radius-pill);
  background: var(--pg-surface); color: var(--pg-brand);
  font: 600 14px/1.2 inherit; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pg-tab:hover        { background: #e8f4fa; }
.pg-tab[aria-selected="true"] { background: var(--pg-brand); color: #fff; }
.pg-tab:focus-visible{ outline: 3px solid #96d4ee; outline-offset: 2px; }
.pg-tab-icon         { width: 16px; height: 16px; flex: 0 0 auto; }

/* ------------------------------------------------------ back-to-nav bubble - */
.pg-back {
  position: fixed; left: 18px; bottom: 18px; z-index: 70;
  display: none; align-items: center; gap: 6px;
  padding: 11px 17px; border: 0; border-radius: 26px;
  background: var(--pg-brand); color: #fff;
  font: 600 14px/1 inherit; cursor: pointer;
  box-shadow: var(--pg-shadow-lift);
}
.pg-back.is-visible  { display: inline-flex; }
.pg-back:hover       { background: var(--pg-brand-dark); }

/* ------------------------------------------------ secondary (vendor) nav - */
/* Built automatically from the cards in the active tab, so a visitor can see
   every demo in a category without scrolling to discover it. Self-maintaining:
   add a card and its chip appears — nothing to hand-update.                  */
.pg-subnav {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 16px; padding: 0;
  list-style: none;
}
.pg-subnav:empty { display: none; }
.pg-subnav > li  { flex: 0 0 auto; }   /* never squash a chip in the scroll strip */
.pg-subnav-chip {
  padding: 5px 12px; border-radius: var(--pg-radius-pill);
  border: 1px solid var(--pg-line); background: #fbfcfd;
  color: var(--pg-ink-soft); font: 500 13px/1.3 inherit;
  cursor: pointer; white-space: nowrap;
}
.pg-subnav-chip:hover { border-color: var(--pg-brand); color: var(--pg-brand);
                        background: var(--pg-brand-tint); }
.pg-subnav-chip:focus-visible { outline: 3px solid #96d4ee; outline-offset: 2px; }

/* Brief highlight so the eye lands on the card that was jumped to. */
@keyframes pg-flash { from { box-shadow: 0 0 0 3px rgba(21,149,200,.55); }
                      to   { box-shadow: var(--pg-shadow); } }
.pg-card.is-flash { animation: pg-flash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .pg-card.is-flash { animation: none; } }

/* -------------------------------------------------------------- card grid - */
/* auto-fit + minmax means the column count follows the viewport with no media
   queries and no JS: wide desktop 4 up, laptop 3, tablet 2, phone 1.          */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pg-card-min), 1fr));
  gap: var(--pg-gap);
  align-items: start;
}
.pg-card            { display: none; min-width: 0; }
.pg-card.is-active  { display: flex; flex-direction: column;
                      background: var(--pg-surface);
                      border: 1px solid var(--pg-line);
                      border-radius: var(--pg-radius);
                      padding: 18px 18px 16px;
                      box-shadow: var(--pg-shadow); }
/* A card that needs the full row (wide banners, side-by-side comparisons). */
.pg-card.is-wide    { grid-column: 1 / -1; }

.pg-card h2   { margin: 0 0 10px; font-size: 22px; color: var(--pg-ink); }
.pg-card h3   { margin: 6px 0 8px; font-size: 19px; line-height: 1.25; color: var(--pg-ink); }
.pg-card h4   { margin: 10px 0 6px; font-size: 16px; color: var(--pg-ink); }
.pg-card p    { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--pg-ink-soft); }
.pg-card p:last-of-type { margin-bottom: 12px; }

/* Vendor logos are capped by HEIGHT, not width.

   Width-capping was the bug: it makes a square icon and a long wordmark two
   completely different optical sizes. Measured on the live page, logos ranged
   from 24px to 607px tall — a 25x spread on a single row of cards. Capping the
   height instead is what makes a WhatsApp square and a Zoho wordmark read as
   the same weight. max-width is a backstop for very wide wordmarks.

   SPECIFICITY, THE HARD WAY: the theme ships
       .widget-type-rich_text img { max-width: 100% }
   which is (0,1,1) and quietly beat the old plain `.pg-logo` (0,1,0). That rule
   therefore never applied at all — every logo on the page was being held up by
   its own inline style, and stripping those would have rendered logos at full
   natural size (Glide at 1080px wide). The selectors below are (0,2,1), so they
   win on merit. Do not "simplify" them back to a bare .pg-logo.

   ASPECT RATIO, THE HARD WAY: `.pg-card.is-active` is a COLUMN flex container,
   so its children stretch across the cross axis (horizontally) by default.
   That stretch beats `width:auto` — every logo was pulled out to the 190px
   max-width and then squashed to 44px tall by max-height, so a 512x512 square
   rendered as 190x44. `align-self: flex-start` opts out of the stretch and
   hands sizing back to the image's own proportions. Do not remove it.        */
.hs_cos_wrapper img.pg-logo,
.pg-card img.pg-logo {
  display: block; width: auto; height: auto; align-self: flex-start;
  max-height: 44px; max-width: 190px; margin-bottom: 12px;
}

/* A content image — a screenshot shown as evidence, not a vendor mark. Kept
   deliberately uncapped: it is the point of the card, not decoration.        */
.hs_cos_wrapper img.pg-figure,
.pg-card img.pg-figure {
  align-self: flex-start;          /* same flex-stretch trap as .pg-logo above */
  max-width: 100%; height: auto;
  border: 1px solid var(--pg-line); border-radius: 6px;
}

/* A group card: one vendor, several demos nested inside (e.g. Glide's 3 apps) */
.pg-subgrid   { display: grid; gap: 12px; margin-top: 4px;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pg-subcard   { border: 1px solid var(--pg-line); border-radius: 8px; padding: 12px; }
.pg-subcard h4{ margin-top: 0; }

/* ------------------------------------------------------------------ CTAs - */
/* One obvious action per demo. Execs skim; underlined text links get missed.  */
.pg-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 4px 6px 4px 0; padding: 10px 17px;
  background: var(--pg-brand); color: #fff !important;
  border-radius: 6px; text-decoration: none !important;
  font-weight: 600; font-size: 14px;
  transition: background-color .15s ease, transform .05s ease;
}
.pg-cta:hover  { background: var(--pg-brand-dark); }
.pg-cta:active { transform: translateY(1px); }
.pg-cta:focus-visible { outline: 3px solid #96d4ee; outline-offset: 2px; }
.pg-cta--ghost { background: transparent; color: var(--pg-brand) !important;
                 border: 2px solid var(--pg-brand); }
.pg-cta--ghost:hover { background: #e8f4fa; }
.pg-cta-row    { margin-top: auto; padding-top: 6px; }  /* pins CTAs to card bottom */

/* Signals an external destination without shouting. */
.pg-cta[target="_blank"]::after { content: "↗"; font-size: 12px; opacity: .85; }

/* ------------------------------------------------------- embedded widgets - */
/* Ratio box: the iframe fills a shape defined by ratio, not by hard pixels, so
   it scales with viewport AND browser zoom on any OS. Override per embed with
   style="--ratio: 3/4" — no new CSS needed.                                   */
.pg-embed {
  position: relative; width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  margin-top: auto;
  border-radius: 6px; overflow: hidden;
  background: #f6f8f9;
}
.pg-embed > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
}
/* Some vendors need a real minimum to render their UI at all. */
.pg-embed--tall  { --ratio: 3 / 4; min-height: 480px; }
.pg-embed--short { --ratio: 16 / 9; min-height: 200px; }

/* A vendor that says width="100%" height="700" has given a height, not a ratio.
   Honour that height, but never let one embed swallow the screen: clamp keeps
   it between a usable minimum and 80% of the viewport on any device.          */
.pg-embed--fixed { aspect-ratio: auto; height: clamp(300px, var(--h, 420px), 80vh); }

/* Very old engines without aspect-ratio still get a usable box. */
@supports not (aspect-ratio: 1 / 1) {
  .pg-embed { height: 420px; }
}

/* ------------------------------------------------- click-to-load embeds - */
/* Widgets that ask for camera/mic must never do so unannounced. They render
   as a placeholder stating what will happen, and load only on click.        */
.pg-embed--gated { display: flex; align-items: center; justify-content: center;
                   background: #f6f8f9; border: 1px dashed var(--pg-line); }
.pg-gate        { display: flex; flex-direction: column; align-items: center;
                  gap: 10px; padding: 20px; text-align: center; max-width: 300px; }
.pg-gate-note   { margin: 0; font-size: 13.5px; line-height: 1.45;
                  color: var(--pg-ink-faint); }
.pg-gate-btn    { padding: 10px 20px; border: 0; border-radius: 6px;
                  background: var(--pg-brand); color: #fff;
                  font: 600 14px/1 inherit; cursor: pointer; }
.pg-gate-btn:hover { background: var(--pg-brand-dark); }
.pg-gate-btn:focus-visible { outline: 3px solid #96d4ee; outline-offset: 2px; }

/* --------------------------------------------------- widget wrapper pages - */
/* Each recovered widget lives on its own small page which the playground
   embeds in an iframe. They share this stylesheet so a demo never looks like
   it came from a different website than the card it sits in — which is exactly
   what the old hand-picked purple/orange headings were doing.               */
.pg-wrap        { text-align: center; padding: 20px 12px; }
.pg-wrap h1,
.pg-wrap h2     { margin: 0 0 6px; font-size: 20px; line-height: 1.25;
                  color: var(--pg-ink); }
.pg-wrap p      { margin: 0; font-size: 15px; line-height: 1.45;
                  color: var(--pg-ink-faint); }

/* ---------------------------------------------------------- status notice - */
/* Visitor-facing wording only. Never expose internal/technical reasons here.  */
.pg-notice { margin-top: 6px; font-style: italic; color: var(--pg-ink-faint); font-size: 13.5px; }

/* ------------------------------------------------------------- responsive - */
@media (max-width: 768px) {
  /* Horizontal scroll strip beats a 4-row wall of pills on a phone. */
  .pg-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
            -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .pg-tab { font-size: 13px; padding: 7px 12px; }
  /* Same reasoning for the vendor chips: 7 of them wrap to 3 rows on a phone
     and push the first demo off the screen. One scrollable line instead.     */
  .pg-subnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
               -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .pg-back{ left: 12px; bottom: 12px; padding: 10px 15px; font-size: 13px; }
  .pg-card.is-active { padding: 15px; }
}
@media (max-width: 700px) {
  .pg-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- accessibility - */
@media (prefers-reduced-motion: reduce) {
  .pg-cta, .pg-tab { transition: none; }
  html { scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  .pg-card.is-active { border-color: #7a848c; }
  .pg-cta            { text-decoration: underline !important; }
}
@media print {
  .pg-nav, .pg-back { display: none !important; }
  .pg-card          { display: block !important; break-inside: avoid; }
}