/* ============================================================
   Our Sister's Place — Thrift Store page styles
   ------------------------------------------------------------
   MODX: static asset at assets/css/pages/thrift-store.css,
   linked by template `tplThrift` AFTER assets/css/osp.css.
   Layout columns are Bootstrap grid (see Thrift-Store.html);
   this file only skins the page's custom components.
   Ported from the prototype inline <style>; hand-rolled grid
   layouts were dropped in favor of Bootstrap rows/cols, and the
   prototype's JetBrains Mono micro-labels were re-set in the
   site sans (Public Sans) since the shared head chunk does not
   load a mono font.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.ts-breadcrumb {
  padding-top: 24px;
  font-size: 13px;
  color: var(--osp-ink-mute);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.ts-breadcrumb a { color: var(--osp-ink-mute); }
.ts-breadcrumb a:hover { color: var(--osp-plum-700); }
.ts-breadcrumb .sep { margin: 0 8px; color: var(--osp-line); }
.ts-breadcrumb .current { color: var(--osp-plum-700); }

/* Small-caps utility label (replaces the prototype's mono labels) */
.ts-microlabel {
  font-family: var(--osp-font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Hero ---------- */
.ts-hero { padding: 32px 0 56px; }
.ts-hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  margin-top: 14px;
}
.ts-hero .lede {
  margin-top: 20px;
  font-size: 19px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
}

/* Impact strip: Bootstrap row-cols-3 g-0 provides the columns;
   this skins the shell + 1px hairlines (same trick as osp.css
   .thrift-stats). */
.ts-impact-strip {
  margin-top: 28px;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-md);
  overflow: hidden;
}
/* osp.css's `.container-xxl .row` gutter override out-specifies
   Bootstrap's .g-0 — re-zero it for the flush stat strip. */
.ts-impact-strip.row { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.ts-impact-cell {
  background: var(--osp-paper);
  padding: 18px 16px;
  text-align: center;
  height: 100%;
}
.ts-impact-strip .col + .col .ts-impact-cell { border-left: 1px solid var(--osp-line); }
.ts-impact-cell .num {
  font-family: var(--osp-font-serif);
  font-size: 26px;
  color: var(--osp-plum-900);
  font-weight: 500;
  line-height: 1;
}
.ts-impact-cell .num em { color: var(--osp-terra-600); font-style: normal; }
.ts-impact-cell .lbl {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--osp-ink-mute);
  line-height: 1.3;
}

/* Hero photo */
.ts-hero-photo {
  aspect-ratio: 1/1;
  background: var(--osp-plum-50);
  position: relative;
  overflow: hidden;
  border-radius: var(--osp-r-md);
  border: 1px solid var(--osp-line);
}
.ts-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-hero-tag {
  position: absolute; top: 20px; left: 20px;
  background: var(--osp-terra-600); color: #fff;
  padding: 8px 14px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700;
}
.ts-hero-pricetag {
  position: absolute; bottom: 22px; right: 22px;
  background: #fff; color: var(--osp-ink);
  padding: 14px 18px; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transform: rotate(3deg);
  border-left: 3px solid var(--osp-terra-600);
}
.ts-hero-pricetag .price {
  font-family: var(--osp-font-serif);
  font-size: 22px; line-height: 1; font-weight: 500;
}
.ts-hero-pricetag .label {
  font-size: 10.5px; color: var(--osp-ink-mute);
  margin-top: 4px; letter-spacing: 0.04em;
}
.ts-photo-cred {
  position: absolute; bottom: 8px; left: 12px;
  color: rgba(255,255,255,.85);
  font-size: 10px; letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ---------- Three doors ---------- */
.door {
  background: var(--osp-paper);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  padding: 32px;
  color: inherit;
  transition: all 0.25s;
  display: flex; flex-direction: column;
}
.door:hover {
  border-color: var(--osp-terra-300);
  transform: translateY(-3px);
  box-shadow: var(--osp-sh-md);
  text-decoration: none;
  color: inherit;
}
.door-photo {
  aspect-ratio: 16/10;
  margin: -32px -32px 18px;
  overflow: hidden;
  border-radius: var(--osp-r-lg) var(--osp-r-lg) 0 0;
  background: var(--osp-plum-50);
}
.door-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-num { color: var(--osp-terra-700); }
.door h3 {
  margin-top: 8px;
  font-size: 26px;
  line-height: 1.15;
}
.door p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
  flex: 1;
}
.door .arrow-row {
  margin-top: 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--osp-plum-700);
  font-weight: 600;
}

/* ---------- Visit / hours panel ---------- */
.visit-section {
  background: var(--osp-plum-900);
  color: #fff;
  border-radius: var(--osp-r-xl);
  padding: 56px;
}
.visit-section h2 {
  color: #fff;
  font-size: 36px;
  line-height: 1.15;
}
.visit-section .eyebrow { color: var(--osp-terra-300); }
.visit-section .address {
  margin-top: 16px;
  font-size: 17px;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
}
.visit-section .address strong {
  color: #fff;
  font-family: var(--osp-font-serif);
  font-size: 22px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.visit-section .address a { color: var(--osp-terra-300); }
.visit-section .map-cta {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 14px; font-weight: 600;
}
.visit-section .map-cta:hover {
  background: rgba(255,255,255,.22);
  text-decoration: none;
  color: #fff;
}
.visit-section .visit-fineprint {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}
.hours-table {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,.06);
  border-radius: var(--osp-r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.hours-table li {
  display: flex; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
}
.hours-table li:last-child { border-bottom: none; }
.hours-table li .day { color: rgba(255,255,255,.85); font-weight: 500; }
.hours-table li .time {
  color: #fff;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hours-table li.closed .time { color: rgba(255,255,255,.5); }
.hours-table li.today { background: rgba(232, 181, 161, 0.12); }
.hours-table li.today .day { color: var(--osp-terra-300); font-weight: 700; }
.hours-section-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--osp-terra-300);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 14px;
}
.hours-section-label:first-child { margin-top: 0; }

/* ---------- Donate goods ---------- */
.accept-col {
  background: var(--osp-paper);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-lg);
  padding: 32px;
  height: 100%;
}
.accept-col.yes { border-left: 4px solid #2F7050; }
.accept-col.no { border-left: 4px solid var(--osp-terra-600); }
.accept-col h3 {
  font-size: 22px;
  display: flex; align-items: center; gap: 12px;
}
.accept-col h3 .accept-badge {
  font-size: 11px;
  font-family: var(--osp-font-sans);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}
.accept-col.yes h3 .accept-badge { background: #DDEFE3; color: #2F7050; }
.accept-col.no h3 .accept-badge { background: var(--osp-terra-50); color: var(--osp-terra-700); }
.accept-col ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  columns: 2;
  column-gap: 18px;
}
.accept-col li {
  font-size: 14.5px;
  color: var(--osp-ink-soft);
  padding: 6px 0;
  break-inside: avoid;
}
@media (max-width: 767.98px) { .accept-col ul { columns: 1; } }

.dropoff-card {
  margin-top: 28px;
  background: var(--osp-terra-50);
  border: 1px solid var(--osp-terra-100);
  border-radius: var(--osp-r-lg);
  padding: 28px 32px;
}
.dropoff-card h4 {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--osp-font-serif);
}
.dropoff-card p {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--osp-ink-soft);
  line-height: 1.55;
}
.pickup-cta {
  background: var(--osp-terra-600);
  color: #fff;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  display: inline-block;
}
.pickup-cta:hover {
  background: var(--osp-terra-700);
  text-decoration: none;
  color: #fff;
}
.donate-photo-cell {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--osp-r-md);
  background: var(--osp-plum-50);
}
.donate-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Volunteer at the store ---------- */
.volunteer-section {
  background: linear-gradient(155deg, var(--osp-cream-2), var(--osp-cream));
  border-radius: var(--osp-r-xl);
  padding: 56px;
}
.vf-photo {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--osp-r-md);
  position: relative;
  background: var(--osp-plum-50);
}
.vf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* NOTE: the prototype set the quote white (a dark-panel leftover);
   re-inked for the light panel it actually sits on. */
.vf-quote {
  color: var(--osp-plum-900);
  font-family: var(--osp-font-serif);
  font-size: 24px; line-height: 1.35;
  font-style: italic;
}
.vf-attr {
  margin-top: 16px;
  color: var(--osp-terra-700);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
}

.ts-role-card {
  background: #fff;
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-md);
  padding: 22px;
  height: 100%;
  display: flex; flex-direction: column;
}
.ts-role-card .ico {
  width: 36px; height: 36px;
  background: var(--osp-plum-50);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--osp-plum-700);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.ts-role-card h4 {
  font-family: var(--osp-font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.ts-role-card p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--osp-ink-soft);
  line-height: 1.5;
  flex: 1;
}
.ts-role-card .commitment {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--osp-line);
  font-size: 11px;
  color: var(--osp-terra-700);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Story callout ---------- */
.ts-story-card {
  background: var(--osp-paper);
  border: 1px solid var(--osp-line);
  border-radius: var(--osp-r-xl);
  padding: 56px;
}
.story-photo-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--osp-r-md);
  background: var(--osp-plum-50);
}
.story-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-story-quote {
  font-family: var(--osp-font-serif);
  font-size: 28px;
  line-height: 1.3;
  color: var(--osp-plum-900);
  font-weight: 400;
  font-style: italic;
  text-wrap: balance;
}
.ts-story-quote::before {
  content: "\201C";
  font-size: 80px;
  color: var(--osp-terra-300);
  line-height: 0.8;
  display: block;
  margin-bottom: 8px;
  font-family: var(--osp-font-serif);
}
.ts-story-attribution {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--osp-line);
  font-size: 14px;
  color: var(--osp-ink-mute);
}
.ts-story-attribution strong {
  display: block;
  color: var(--osp-plum-900);
  font-family: var(--osp-font-sans);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}

/* ---------- Final CTA ---------- */
.cta-final {
  background: linear-gradient(135deg, var(--osp-terra-600), var(--osp-terra-700));
  color: #fff;
  border-radius: var(--osp-r-xl);
  padding: 56px;
  text-align: center;
}
.cta-final h2 {
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
  line-height: 1.15;
  text-wrap: balance;
  max-width: 22ch;
  margin: 0 auto;
}
.cta-final p {
  margin-top: 14px;
  font-size: 17px;
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  max-width: 50ch;
  margin-left: auto; margin-right: auto;
}
.cta-final .actions {
  margin-top: 28px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cta-final .actions a {
  background: #fff;
  color: var(--osp-plum-900);
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cta-final .actions a.alt {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
}
.cta-final .actions a:hover { text-decoration: none; transform: translateY(-1px); }

/* ---------- Small screens (panel padding only; columns are
   handled by Bootstrap breakpoints) ---------- */
@media (max-width: 767.98px) {
  .ts-hero { padding: 24px 0 32px; }
  .visit-section { padding: 36px 28px; }
  .volunteer-section { padding: 32px 24px; }
  .ts-story-card { padding: 32px 28px; }
  .ts-story-quote { font-size: 22px; }
  .cta-final { padding: 36px 26px; }
  .dropoff-card { padding: 24px; }
}