/* YKPATCH_INSPIRACJE_HOME_2026_10_01 - sekcja Inspiracje na stronie glownej yokaba.pl (projekt zatwierdzony 01.10.2026) */
/* ===== SEKCJA INSPIRACJE (to idzie na stronę główną) ===== */
  .yki{--c:#A88466;--c-dark:#8c6c50;--ink:#1d1d1b;--mut:#8a8580;--cream:#f7f2ec;--line:#e9e0d6;
    position:relative;overflow:hidden;background:
      radial-gradient(120% 90% at 0% 0%,#fbf8f4 0%,var(--cream) 55%,#f1e8de 100%);
    padding:88px 0 80px;font-family:Montserrat,sans-serif;color:var(--ink)}
  .yki *{box-sizing:border-box}
  .yki a{color:inherit;text-decoration:none}
  /* wielki, ledwo widoczny napis w tle */
  .yki__word{position:absolute;left:-1.5vw;bottom:-0.18em;font-weight:200;font-size:clamp(120px,17vw,260px);letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(168,132,102,.22);pointer-events:none;user-select:none;white-space:nowrap}
  .yki__in{position:relative;max-width:1320px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:56px;align-items:start}

  /* lewa kolumna */
  .yki__intro{position:sticky;top:90px;padding-top:6px}
  .yki__kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--c);margin:0 0 18px}
  .yki__kicker:before{content:"";width:28px;height:1px;background:var(--c)}
  .yki__title{margin:0;font-size:clamp(28px,3.1vw,40px);line-height:1.12;font-weight:600;letter-spacing:-.015em}
  .yki__title em{display:block;font-style:italic;font-weight:400;color:var(--c-dark)}
  .yki__lead{margin:18px 0 0;font-size:15px;line-height:1.65;color:#5b5752;max-width:34ch}
  .yki__stats{display:flex;gap:22px;margin:22px 0 0;padding:0;list-style:none}
  .yki__stats li{font-size:12px;color:var(--mut);line-height:1.3}
  .yki__stats b{display:block;font-size:22px;font-weight:600;color:var(--ink)}
  .yki__chips{display:flex;flex-wrap:wrap;gap:7px;margin:26px 0 0}
  .yki-chip{white-space:nowrap;font-size:12px;font-weight:500;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);transition:all .18s}
  .yki-chip:hover{border-color:var(--c);color:var(--c);transform:translateY(-1px)}
  .yki__cta{display:inline-flex;align-items:center;gap:12px;margin:30px 0 0;padding:16px 26px;border-radius:999px;background:var(--ink);color:#fff!important;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,gap .2s}
  .yki__cta:hover{background:var(--c);gap:16px}
  .yki__cta svg{flex:0 0 auto}

  /* karuzela */
  .yki__rail{position:relative;min-width:0}
  .yki__nav{display:flex;justify-content:flex-end;gap:8px;margin:0 0 16px}
  .yki__nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s}
  .yki__nav button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
  .yki__nav button:disabled{opacity:.35;cursor:default}
  .yki__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;padding:4px 32px 26px 2px;margin-right:-32px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .yki__track::-webkit-scrollbar{display:none}
  .yki__track:after{content:"";flex:0 0 1px}
  .yki__bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-right:0}
  .yki__bar i{display:block;height:100%;width:30%;background:var(--c);border-radius:2px;transition:transform .15s linear,width .2s}

  /* kafelek */
  .yki-card{flex:0 0 clamp(230px,19vw,290px);scroll-snap-align:start;opacity:0;transform:translateY(18px);animation:ykiIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
  @keyframes ykiIn{to{opacity:1;transform:none}}
  .yki-card:nth-child(even){margin-top:34px}
  .yki-card__media{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#e8ddd2;box-shadow:0 18px 34px -22px rgba(60,40,25,.45)}
  .yki-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .yki-card:hover .yki-card__media img{transform:scale(1.06)}
  .yki-card__shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(20,14,10,.55),transparent);pointer-events:none}
  .yki-card__play{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);display:flex;align-items:center;justify-content:center;padding-left:2px}
  .yki-card__author{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;color:#fff;font-size:12px;max-width:calc(100% - 80px)}
  .yki-card__author b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .yki-card__author img,.yki-card__author .ini{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9);flex:0 0 auto}
  .yki-card__author .ini{display:inline-flex;align-items:center;justify-content:center;background:var(--c);font-size:11px;font-weight:700}
  .yki-card__heart{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:600}
  .yki-card__heart svg{fill:none;stroke:#fff;stroke-width:2}
  .yki-card__body{padding:14px 2px 0}
  .yki-card__body h3{margin:0;font-size:15px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
  .yki-card__body h3 a:hover{color:var(--c-dark)}
  .yki-card__tags{display:flex;gap:6px;margin:8px 0 0;flex-wrap:wrap}
  .yki-card__tags span{font-size:11px;color:var(--c-dark);background:rgba(168,132,102,.12);padding:3px 8px;border-radius:999px}
  .yki-card__shop{margin:12px 0 0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);transition:border-color .18s,box-shadow .18s}
  .yki-card__shop span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .yki-card__shop em{grid-row:2;font-style:normal;font-size:12px;color:var(--mut)}
  .yki-card__shop svg{grid-row:1/3;grid-column:2;color:var(--c);transition:transform .2s}
  .yki-card__shop:hover{border-color:var(--c);box-shadow:0 8px 20px -12px rgba(168,132,102,.6)}
  .yki-card__shop:hover svg{transform:translateX(4px)}
  /* kafelek "zobacz wszystkie" na końcu karuzeli */
  .yki-more{flex:0 0 clamp(200px,16vw,240px);scroll-snap-align:start;align-self:stretch;margin-top:34px;border-radius:14px;border:1px dashed var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;aspect-ratio:4/5;color:var(--c-dark);transition:background .2s}
  .yki-more:hover{background:rgba(168,132,102,.08)}
  .yki-more b{font-size:34px;font-weight:300;color:var(--ink)}
  .yki-more span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

  /* ===== telefon / wąski kontener ===== */
  @media (max-width:820px){
    .yki{padding:56px 0 56px}
    .yki__in{grid-template-columns:minmax(0,1fr);gap:26px;padding:0 18px}
    .yki__intro,.yki__rail{min-width:0}
    .yki__intro{position:static}
    .yki__title{font-size:28px}
    .yki__lead{font-size:14px}
    .yki__stats{gap:18px}
    .yki__chips{flex-wrap:nowrap;overflow-x:auto;margin:20px -18px 0;padding:0 18px 4px;scrollbar-width:none}
    .yki__chips::-webkit-scrollbar{display:none}
    .yki-chip{flex:0 0 auto}
    .yki__cta{display:none}
    .yki__nav{display:none}
    /* przyciąganie kafelka do marginesu 18px, nie do krawędzi ekranu */
    .yki__track{gap:12px;padding:2px 18px 18px;margin:0 -18px;scroll-padding-left:18px;scroll-padding-right:18px}
    .yki-card{flex-basis:70vw}
    .yki-card:nth-child(even){margin-top:0}
    .yki-more{flex-basis:46vw;margin-top:0}
    .yki__bar{margin:0}
    .yki__cta--m{display:flex!important;justify-content:center;width:100%;margin-top:22px}
    .yki__word{font-size:34vw;bottom:auto;top:10px;left:-4vw}
  }
  .yki__cta--m{display:none}
  @media (prefers-reduced-motion:reduce){.yki-card{animation:none;opacity:1;transform:none}.yki *{transition:none!important}}

/* wideo na kafelku po najechaniu (desktop) */
.yki-card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;pointer-events:none}
.yki-card.is-playing .yki-card__video{opacity:1}
/* motyw: naglowki i linki w sekcji bez stylow globalnych */
.yki h2,.yki h3{text-transform:none;font-family:Montserrat,sans-serif}
.yki .yki__title{color:var(--ink)}
.yki ul.yki__stats li{list-style:none}