/* outlet.css — ADR-011 aneks C: strona „szkło ze stocku" (Outlet).
   Wizualnie ODRÓŻNIONA od katalogu premium: cieplejszy amber, estetyka „mądrej okazji",
   nie bazar. Reużywa szkieletu sn-r2-*/sn-kt2-* + własne sn-outlet-*. */

/* ── Hero card (prawa strona) ── */
.sn-outlet-hero-card {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(28px, 3vw, 48px); border-radius: var(--radius-tight);
  background:
    radial-gradient(circle at 0% 100%, rgba(214, 158, 74, 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #2a2118 0%, var(--ink-800, #14110d) 70%);
  border: 1px solid rgba(214, 158, 74, 0.22);
  overflow: hidden;
}
.sn-outlet-hero-eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brass-400, #d9b066);
}
.sn-outlet-hero-big {
  font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.02em;
  color: #fff; margin: 0;
}
.sn-outlet-hero-big em { color: var(--brass-300, #e9c98a); font-style: italic; }
.sn-outlet-hero-note {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
  color: var(--fg-on-dark-2); margin: 0; max-width: 36ch; text-wrap: pretty;
}

/* ── Ramka framująca (pas pod hero) ── */
.sn-outlet-ribbon { background: linear-gradient(90deg, #f3e7d0 0%, #efe0c4 100%); border-top: 2px solid var(--brass-500, #c79a4e); border-bottom: 1px solid rgba(176,144,88,0.35); }
.sn-outlet-ribbon-in { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.sn-outlet-ribbon-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brass-600, #a9802f); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 18px;
}
.sn-outlet-ribbon-txt {
  margin: 0; font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5;
  color: #5a4423;
}
.sn-outlet-ribbon-txt strong { color: #3d2d14; font-weight: 700; }

/* ── Empty-state ── */
.sn-outlet-empty {
  max-width: 760px; margin: clamp(20px,2.5vw,32px) 0 clamp(28px,3vw,40px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(176,144,88,0.30); border-radius: 12px;
  background: linear-gradient(180deg, rgba(243,231,208,0.5) 0%, var(--paper-2, #f6f4ef) 100%);
}
.sn-outlet-empty-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: var(--ls-loose, .08em); text-transform: uppercase; color: var(--brass-600, #a9802f);
}
.sn-outlet-empty-h {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-on-light-1); margin: 0 0 12px;
}
.sn-outlet-empty-p {
  font-family: var(--font-body); font-size: clamp(15px,1.3vw,17px); line-height: 1.6;
  color: var(--fg-on-light-2); margin: 0 0 24px; text-wrap: pretty;
}
.sn-outlet-empty-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sn-outlet-empty-link {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--brass-600, #a9802f);
  text-decoration: none; padding: 10px 14px; border: 1px solid var(--brass-300, #e0c79a); border-radius: 8px;
}
.sn-outlet-empty-link:hover { background: rgba(169,128,47,0.08); }

/* ── Siatka kafelków (szkielet docelowy, teraz ghost „wkrótce") ── */
.sn-outlet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 2.5vw, 32px);
}
.sn-outlet-tile {
  display: flex; flex-direction: column;
  border: 1px solid rgba(176,144,88,0.28); border-radius: 8px; overflow: hidden;
  background: #fff;
}
.sn-outlet-tile-img {
  position: relative; aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, transparent 0, transparent 14px, rgba(176,144,88,0.06) 14px, rgba(176,144,88,0.06) 15px),
    #f3ece0;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.sn-outlet-tile-badge {
  margin: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--brass-600, #a9802f); color: #fff;
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.sn-outlet-tile-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.sn-outlet-tile-kind {
  font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 18px;
  color: var(--fg-on-light-1);
}
.sn-outlet-tile-meta { font-family: var(--font-body); font-size: 12.5px; color: var(--fg-on-light-3); }
.sn-outlet-tile.is-ghost { opacity: 0.62; }

@media (max-width: 900px) { .sn-outlet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .sn-outlet-grid { grid-template-columns: 1fr; }
  .sn-outlet-ribbon-in { align-items: flex-start; }
}