/* GENERATED by candidate/scripts/build-home-delta-c4.cjs from candidate/scripts/home-delta-c4/ggf-home-videos.src.css (sha256 2f60e933bb5ac7f5e6323b1b4bcb984664d45f22537de3c593ed3b89e0e0a6a5). Do not edit. */
/* GGF N4-HOME-C4 — HOME fashion video mosaic.
 * Loaded only when page_name === 'index' (templates/_partials/stylesheets.tpl) and every
 * selector is scoped to #video-inspiracje, so no other page, section or breakpoint changes.
 * Desktop (>=1025px): tall 9:16 cards (people, full silhouette) beside a stacked compact
 *   column (detail / landscape films). Flex ratios come from the card counts so the tall
 *   cards keep 9:16 and the compact cards are square when two, 3:4 when one:
 *   --ggf-tall-flex = 9 x tall, --ggf-compact-flex = 16 / compact (12 when one).
 * Tablet (721-1024px): tall cards in one row, compact cards in a row below.
 * Mobile (<=720px): tall scroll-snap rail, compact cards as a 2-up grid below.
 * Framing: provider decides contain (whole garment, default) or cover (only when the real
 *   source ratio fits the card); object-position = validated focal point. */
#video-inspiracje .ggf-video-mosaic {
  --ggf-gap: 16px;
  --ggf-unit: 35px;
  display: flex;
  align-items: flex-start;
  gap: var(--ggf-gap);
  width: 100%;
  max-width: calc((var(--ggf-tall-flex) + var(--ggf-compact-flex)) * var(--ggf-unit) + var(--ggf-gap) * (var(--ggf-tall) + var(--ggf-compact)));
  margin: 0 auto;
}
#video-inspiracje .ggf-video-mosaic__tall {
  display: flex;
  flex: var(--ggf-tall-flex) 1 0;
  gap: var(--ggf-gap);
  min-width: 0;
}
#video-inspiracje .ggf-video-mosaic__compact {
  display: flex;
  flex: var(--ggf-compact-flex) 1 0;
  flex-direction: column;
  align-self: stretch;
  gap: var(--ggf-gap);
  min-width: 0;
}
#video-inspiracje .ggf-video-card {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  background: #151413;
}
#video-inspiracje .ggf-video-mosaic__tall > .ggf-video-card { flex: 1 1 0; aspect-ratio: 9 / 16; }
#video-inspiracje .ggf-video-mosaic__compact > .ggf-video-card { flex: 1 1 0; }
#video-inspiracje .ggf-video-card .d24-video-story__link { height: 100%; aspect-ratio: auto; }
#video-inspiracje .ggf-video-card__media { object-position: var(--ggf-focal, 50% 50%); }
#video-inspiracje .ggf-video-card__media--contain { object-fit: contain; background: radial-gradient(120% 90% at 50% 38%, #2b2825 0%, #131211 100%); }
#video-inspiracje .ggf-video-card__media--cover { object-fit: cover; }
#video-inspiracje .ggf-video-card .d24-video-story__copy { right: 16px; bottom: 16px; left: 16px; }
#video-inspiracje .ggf-video-card .d24-video-story__copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(15px, 1.2vw, 21px);
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#video-inspiracje .ggf-video-card--compact .d24-video-story__copy { right: 14px; bottom: 14px; left: 14px; }
#video-inspiracje .ggf-video-card--compact .d24-video-story__copy strong { font-size: clamp(14px, 1vw, 17px); }
#video-inspiracje .ggf-video-card .d24-video-story__copy span { font-size: 12px; }

/* Compact films only (no tall footage): up to two per row. */
#video-inspiracje .ggf-video-mosaic--t0 { max-width: 760px; }
#video-inspiracje .ggf-video-mosaic--t0 .ggf-video-mosaic__compact { flex: 1 1 100%; flex-flow: row wrap; align-self: auto; }
#video-inspiracje .ggf-video-mosaic--t0 .ggf-video-mosaic__compact > .ggf-video-card { flex: 1 1 calc(50% - var(--ggf-gap)); aspect-ratio: 1 / 1; }
#video-inspiracje .ggf-video-mosaic--t0.ggf-video-mosaic--c1 { max-width: 420px; }
#video-inspiracje .ggf-video-mosaic--t0.ggf-video-mosaic--c1 .ggf-video-mosaic__compact > .ggf-video-card { aspect-ratio: 3 / 4; }

/* States formerly only in the CCC bundle (C1); repeated here so a stale bundle cannot hide them. */
#video-inspiracje .d24-video-stories__pending { max-width: 640px; margin: 0; padding: 18px 20px; border: 1px dashed rgba(32,33,36,.28); border-radius: 16px; color: #4f4a43; background: rgba(255,255,255,.66); font-size: 14px; line-height: 1.5; }
#video-inspiracje .d24-video-story__link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px rgba(20,20,20,.55); }
#video-inspiracje .d24-video-story__control:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 1024px) {
  #video-inspiracje .ggf-video-mosaic { flex-wrap: wrap; max-width: none; }
  #video-inspiracje .ggf-video-mosaic__tall { flex: 1 1 100%; max-width: calc(var(--ggf-tall) * 290px + (var(--ggf-tall) - 1) * var(--ggf-gap)); margin: 0 auto; }
  #video-inspiracje .ggf-video-mosaic__compact { flex: 1 1 100%; flex-direction: row; align-self: auto; max-width: calc(var(--ggf-compact) * 300px + (var(--ggf-compact) - 1) * var(--ggf-gap)); margin: 0 auto; }
  #video-inspiracje .ggf-video-mosaic__compact > .ggf-video-card { flex: 1 1 0; aspect-ratio: 1 / 1; }
  #video-inspiracje .ggf-video-mosaic--c1 .ggf-video-mosaic__compact > .ggf-video-card { aspect-ratio: 3 / 4; }
}
@media (max-width: 720px) {
  #video-inspiracje .ggf-video-mosaic { display: block; }
  #video-inspiracje .ggf-video-mosaic__tall {
    display: flex;
    width: calc(100% + 24px);
    max-width: none;
    margin: 0 -24px 0 0;
    padding: 0 24px 10px 0;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #video-inspiracje .ggf-video-mosaic__tall::-webkit-scrollbar { display: none; }
  #video-inspiracje .ggf-video-mosaic__tall > .ggf-video-card { flex: 0 0 min(64vw, 280px); width: auto; scroll-snap-align: start; border-radius: 16px; }
  #video-inspiracje .ggf-video-mosaic--t1 .ggf-video-mosaic__tall > .ggf-video-card { flex-basis: min(78vw, 320px); }
  #video-inspiracje .ggf-video-mosaic__compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; margin: 12px 0 0; }
  #video-inspiracje .ggf-video-mosaic--c1 .ggf-video-mosaic__compact { grid-template-columns: minmax(0, min(78vw, 320px)); }
  #video-inspiracje .ggf-video-mosaic--t0 .ggf-video-mosaic__compact { margin-top: 0; }
  #video-inspiracje .ggf-video-mosaic__compact > .ggf-video-card { width: auto; aspect-ratio: 1 / 1; border-radius: 16px; }
  #video-inspiracje .ggf-video-mosaic--c1 .ggf-video-mosaic__compact > .ggf-video-card { aspect-ratio: 3 / 4; }
  #video-inspiracje .ggf-video-card--compact .d24-video-story__copy { right: 10px; bottom: 10px; left: 10px; }
  #video-inspiracje .ggf-video-card--compact .d24-video-story__copy strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #video-inspiracje .ggf-video-mosaic__tall { scroll-behavior: auto; }
  #video-inspiracje .d24-video-story__media,
  #video-inspiracje .d24-video-story__control { transition: none !important; }
}

/* ggfcontentprovider 0.1.6 (03.11.2026): film card backed by YouTube — same card; poster image instead of <video>, player only after ▶. */
#video-inspiracje .ggf-video-card--youtube .ggf-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
#video-inspiracje .ggf-video-card--youtube.is-yt-playing .d24-video-story__control { display: none; }

/* v3 (03.11.2026, owner proposal via supervisor: „filmy też na mobile w karuzele”): on phones (<=720px) all films —
 * tall and compact — in ONE scroll-snap rail, same card style and size; the next card peeks in. Desktop/tablet unchanged. */
@media (max-width: 720px) {
  #video-inspiracje .ggf-video-mosaic { display: flex; flex-wrap: nowrap; align-items: stretch; width: calc(100% + 24px); max-width: none; margin: 0 -24px 0 0; padding: 0 24px 10px 0; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #video-inspiracje .ggf-video-mosaic::-webkit-scrollbar { display: none; }
  #video-inspiracje .ggf-video-mosaic .ggf-video-mosaic__tall,
  #video-inspiracje .ggf-video-mosaic .ggf-video-mosaic__compact { display: contents; }
  #video-inspiracje .ggf-video-mosaic .ggf-video-card { flex: 0 0 min(64vw, 280px); width: auto; aspect-ratio: 9 / 16; scroll-snap-align: start; border-radius: 16px; }
  #video-inspiracje .ggf-video-mosaic .ggf-video-card--compact .d24-video-story__copy { right: 16px; bottom: 16px; left: 16px; }
  #video-inspiracje .ggf-video-mosaic .ggf-video-card--compact .d24-video-story__copy strong { font-size: clamp(15px, 1.2vw, 21px); }
}