/**
 * Page Designer — Partners Block — frontend + canvas styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 3.7.313)
 *
 * A horizontal partner / logo carousel. Each card holds a company
 * logo (links to their website), a short quote, and the partner name.
 * When more cards are configured than fit the viewport the track
 * overflows and the (runtime-injected) navigation arrows + dots /
 * auto-rotation drive a smooth slide.
 *
 * STRICT ISOLATION
 * ----------------
 *   - Every selector is namespaced `.pd-blk-prt*` — no overlap with
 *     any other block, tool, or panel.
 *   - Panel-mutable values are written as `--pd-blk-prt-*` custom
 *     properties on the root; theme-wired values inherit Global Theme
 *     General Text (colour / font) via `inherit` + `currentColor`.
 *
 * COLOUR COMPLIANCE
 * -----------------
 *   Renders on the PUBLISHED page, so NO admin `--at-color-*` tokens
 *   (those don't exist off the editor). Text colour inherits Global
 *   Theme General Text; all chrome (arrows, dots, logo placeholder)
 *   is derived from `currentColor` via color-mix so it always adapts
 *   to the active theme. Zero hardcoded colours.
 */

/* ── Root container ────────────────────────────────────────────── */
.pd-blk-prt {
    --pd-blk-prt-card-w: 240px;
    --pd-blk-prt-gap: 24px;
    --pd-blk-prt-logo-h: 64px;
    position: relative;
    margin: 24px auto;
    padding: 8px 0;
    max-width: var(--pd-blk-prt-max-width, 100%);
    color: inherit;
    font-family: inherit;
    box-sizing: border-box;
}

/* ── Viewport (clips the overflowing track) ────────────────────── */
.pd-blk-prt-viewport {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* ── Track (flex row that slides) ──────────────────────────────── */
.pd-blk-prt-track {
    display: flex;
    gap: var(--pd-blk-prt-gap);
    align-items: stretch;
    transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    /* transform is written on the LIVE element by the runtime — never
       persisted to the saved HTML, so a saved page always reloads at
       the first slide and the runtime re-drives it. */
}

/* ── Card ──────────────────────────────────────────────────────── */
.pd-blk-prt-card {
    flex: 0 0 var(--pd-blk-prt-card-w);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px;
    min-width: 0;
    text-align: center;
}

/* ── Website link wrapping the logo ────────────────────────────── */
.pd-blk-prt-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* ── Company logo ──────────────────────────────────────────────── *
 * Delivered as a background-image on a <span role="img"> — the URL is
 * the partner's logo (content the panel writes inline). A <span>
 * rather than an <img> sidesteps GrapesJS's 500×500 image-placeholder
 * stamping in the editor canvas and never shows a broken-image glyph.
 * When no logo is set yet the element is a neutral placeholder box
 * derived from the inherited text colour (no admin token, no hardcoded
 * colour); an uploaded logo's background-image covers it.
 */
.pd-blk-prt-logo {
    display: block;
    /* The width slider drives --pd-blk-prt-logo-w; aspect-ratio derives
       the height, so horizontal + vertical always scale together and the
       box's proportions stay locked. */
    width: var(--pd-blk-prt-logo-w, 160px);
    max-width: 100%;
    aspect-ratio: 5 / 2;
    height: auto;
    box-sizing: border-box;
    /* Empty state: the partner logo placeholder image (duplicate of the
       Image block placeholder, text changed to "Partner"). An uploaded
       logo's background-image — written inline by the panel — overrides
       this; clearing it restores the placeholder. */
    background-image: url("logo-placeholder.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 6px;
}

/* ── Quote ─────────────────────────────────────────────────────── */
.pd-blk-prt-quote {
    margin: 0;
    font-size: calc(var(--pd-general-size, 16px) * 0.95);
    font-style: italic;
    line-height: 1.5;
    color: color-mix(in srgb, currentColor 88%, transparent);
}
.pd-blk-prt-quote:empty { display: none; }

/* ── Partner name ──────────────────────────────────────────────── */
.pd-blk-prt-name {
    font-size: calc(var(--pd-general-size, 16px) * 0.875);
    font-weight: 600;
    color: inherit;
}
.pd-blk-prt-name:empty { display: none; }

/* ── Website link (shown under the quote) ──────────────────────── */
.pd-blk-prt-website {
    font-size: calc(var(--pd-general-size, 16px) * 0.8);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.pd-blk-prt-website:hover { opacity: 1; }
.pd-blk-prt-website:empty { display: none; }

/* ── Alignment variants (card content) ─────────────────────────── */
.pd-blk-prt-align-left   .pd-blk-prt-card { align-items: flex-start; text-align: left;  }
.pd-blk-prt-align-center .pd-blk-prt-card { align-items: center;     text-align: center; }
.pd-blk-prt-align-right  .pd-blk-prt-card { align-items: flex-end;   text-align: right; }
.pd-blk-prt-align-left   .pd-blk-prt-link { justify-content: flex-start; }
.pd-blk-prt-align-right  .pd-blk-prt-link { justify-content: flex-end; }
/* "full" stretches the logo to the whole card width */
.pd-blk-prt-align-full .pd-blk-prt-card { align-items: stretch; text-align: center; }
.pd-blk-prt-align-full .pd-blk-prt-logo { width: 100%; }

/* ── Block position (where the row of cards sits when it doesn't fill
   the width — e.g. only 2 partners). The runtime forces flex-start
   while the track overflows so the carousel scrolls correctly. ───── */
.pd-blk-prt-justify-left   .pd-blk-prt-track { justify-content: flex-start; }
.pd-blk-prt-justify-center .pd-blk-prt-track { justify-content: center; }
.pd-blk-prt-justify-right  .pd-blk-prt-track { justify-content: flex-end; }

/* ── Navigation arrows (runtime-injected chrome) ───────────────── */
.pd-blk-prt-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    font-family: inherit;
    line-height: 1;
}
.pd-blk-prt-arrow:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
}
.pd-blk-prt-arrow svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.pd-blk-prt-arrow-prev { left: -6px; }
.pd-blk-prt-arrow-next { right: -6px; }
.pd-blk-prt-arrow[disabled] { opacity: 0.3; cursor: default; }
.pd-blk-prt[data-pd-prt-arrows="0"] .pd-blk-prt-arrow { display: none; }

/* ── Pagination dots (runtime-injected chrome) ─────────────────── */
.pd-blk-prt-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}
.pd-blk-prt-dot {
    position: relative;          /* anchors the invisible tap pad added below */
    flex: 0 0 auto;              /* a dot is a circle; never let a row squeeze it */
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: color-mix(in srgb, currentColor 28%, transparent);
    transition: background 0.15s, transform 0.15s;
}
.pd-blk-prt-dot:hover { background: color-mix(in srgb, currentColor 45%, transparent); }
.pd-blk-prt-dot-active { background: currentColor; transform: scale(1.25); }
.pd-blk-prt[data-pd-prt-dots="0"] .pd-blk-prt-dots { display: none; }

/* When everything fits in one page (no overflow) the runtime adds
   this class so the carousel chrome is hidden. Applied to the live
   element only — never persisted to saved HTML. */
.pd-blk-prt-nooverflow .pd-blk-prt-arrow,
.pd-blk-prt-nooverflow .pd-blk-prt-dots { display: none; }

/* ── Continuous (marquee) scroll mode ──────────────────────────── *
 * The runtime clones the cards (runtime-only, never persisted) and sets
 * --pd-blk-prt-marq-dist to one unit's width; the track then glides one
 * unit and the identical next copy lines up for a seamless loop. Arrows
 * + dots are irrelevant here, so they're hidden. Pauses on hover. */
@keyframes pd-blk-prt-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--pd-blk-prt-marq-dist, -100%)); }
}
.pd-blk-prt-marquee-on .pd-blk-prt-track { transition: none; will-change: transform; }
.pd-blk-prt-marquee-on:hover .pd-blk-prt-track { animation-play-state: paused; }
.pd-blk-prt-marquee-on .pd-blk-prt-arrow,
.pd-blk-prt-marquee-on .pd-blk-prt-dots { display: none; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* One card per view on a phone or tablet, filling the row.
       At 70vw the card was 538px inside a 697px viewport, so 159px of the NEXT
       card bled in on the right and the visible card sat left of centre — it
       read as a misalignment rather than as a deliberate peek, because the peek
       only ever appeared on one side. Filling the row means one card is one
       view: centred by definition, nothing clipped, and the slide maths (which
       count how many cards fit) still get a clean whole number. */
    .pd-blk-prt { --pd-blk-prt-card-w: 100%; --pd-blk-prt-gap: 16px; }
    .pd-blk-prt-arrow-prev { left: 0; }
    .pd-blk-prt-arrow-next { right: 0; }

    /* Touch comfort (layout rule 6: reach 44px) — GROW THE TAP AREA, never
       deform the control. The shared device-polish rule used to put a 44px
       min-height straight onto these, turning an 8px dot into a 10-by-55 thin
       oval on a tablet; the dot is now excluded there and carries its own
       invisible pad instead, exactly as the Section-Slider does. The gap is
       widened first so each pad spans its own half and pads tile edge to edge
       without a neighbour stealing the tap. Visual size is unchanged on every
       device. */
    .pd-blk-prt-dots { gap: 18px; }
    .pd-blk-prt-dot::before {
        content: "";
        position: absolute;
        left: -9px;
        right: -9px;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }

    /* The arrow IS a real button and should reach 44px — but as a true circle.
       Left to the shared rule it grew only in height, rendering 36 wide by 44
       tall. Sized here so it stays round. */
    .pd-blk-prt-arrow { width: 44px; height: 44px; }
}