/* ══════════════════════════════════════════════════════════════════════
   Patra — "Beyond objects" banner, Stories from the City, quote band.
   Uses Patra's own theme tokens (--surface, --ink, --muted, --rule …),
   so the dark theme still works.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --pt-red: #8E2A1B;
  --pt-red-btn: #9A2E1E;
  --pt-kicker: #A8710B;
  --pt-paper: #FBF5E8;
}
html[data-theme="dark"] {
  --pt-red: #E8A06A;
  --pt-red-btn: #A83221;
  --pt-kicker: #D9A441;
  --pt-paper: #171008;
}

.pt-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pt-red);
}

/* ── Banner ─────────────────────────────────────────────────────────── */
.pt-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: clamp(440px, 62vh, 640px);
  background:
    radial-gradient(90% 120% at 80% 30%, rgba(255, 253, 248, 0.9), rgba(255, 253, 248, 0) 70%),
    var(--pt-paper);
  overflow: hidden;
}
.pt-banner-photo {
  position: relative;
  clip-path: polygon(0 0, 95.72% 0.00%, 94.96% 3.85%, 97.16% 7.69%, 94.62% 11.54%, 96.66% 15.38%, 95.91% 19.23%, 94.56% 23.08%, 96.53% 26.92%, 94.46% 30.77%, 96.21% 34.62%, 94.61% 38.46%, 94.70% 42.31%, 96.17% 46.15%, 97.94% 50.00%, 94.84% 53.85%, 95.28% 57.69%, 97.06% 61.54%, 98.47% 65.38%, 96.84% 69.23%, 96.05% 73.08%, 98.60% 76.92%, 94.50% 80.77%, 98.08% 84.62%, 95.57% 88.46%, 94.93% 92.31%, 94.82% 96.15%, 95.66% 100.00%, 0 100%);
}
.pt-banner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
}
.pt-banner-copy {
  position: relative;
  align-self: center;
  padding: 120px clamp(24px, 6vw, 96px) 64px clamp(24px, 3vw, 48px);
  max-width: 760px;
}
.pt-banner-sketch {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 50%;
  width: clamp(160px, 18vw, 260px);
  transform: translateY(-50%) rotate(8deg);
  opacity: 0.16;
  pointer-events: none;
}
.pt-banner-title {
  position: relative;
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4.5vw, 5.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pt-red);
}
.pt-banner-sub {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.pt-banner-text {
  position: relative;
  margin: 0 0 28px;
  max-width: 34em;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--muted);
}
.pt-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 4px;
  background: var(--pt-red-btn);
  color: #FFFDF8;
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(142, 42, 27, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .pt-button:hover { background: #7A2316; transform: translateY(-1px); }
}
.pt-banner-index {
  position: absolute;
  right: clamp(24px, 3vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 4px 0 4px 16px;
  list-style: none;
  border-left: 1px solid rgba(169, 133, 74, 0.5);
  display: none;
}
.pt-banner-index li {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pt-kicker);
  line-height: 2.2;
}
@media (min-width: 1280px) {
  .pt-banner-index { display: block; }
  .pt-banner-copy { padding-right: 230px; }
}

/* ── Stories from the City ──────────────────────────────────────────── */
.pt-stories {
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  background: var(--background);
}
.pt-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}
.pt-stories-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 48px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.pt-stories-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.pt-stories-sub {
  margin: 0;
  max-width: 30em;
  padding-bottom: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
}

.pt-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}
.pt-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(90, 70, 40, 0.06), 0 10px 24px -14px rgba(46, 42, 38, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
  .pt-card:hover {
    transform: translateY(-3px);
    border-color: rgba(169, 133, 74, 0.55);
    box-shadow: 0 2px 4px rgba(90, 70, 40, 0.08), 0 18px 34px -16px rgba(46, 42, 38, 0.35);
  }
  .pt-card:hover .pt-card-link { gap: 12px; }
}
.pt-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(169, 133, 74, 0.12);
}
.pt-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 20px 20px;
}
.pt-card-kicker {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pt-kicker);
}
.pt-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.2;
}
.pt-card-desc {
  margin: 0;
  flex: 1;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}
.pt-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pt-red);
  transition: gap 0.2s ease;
}

/* ── Quote band over the sepia skyline ──────────────────────────────── */
.pt-quote {
  position: relative;
  padding: clamp(48px, 6vw, 72px) 24px clamp(150px, 20vw, 260px);
  text-align: center;
  background:
    url('../assets/hero/border.webp') center bottom / min(1600px, 140%) auto no-repeat,
    var(--background);
}
.pt-quote-text {
  margin: 0 auto 14px;
  max-width: 28em;
  font-family: var(--font-deva-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--pt-red);
}
.pt-quote-en {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--muted);
}
.pt-quote-ornament { color: var(--pt-kicker); font-size: 0.9rem; }

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Phone: copy over a torn-edged photo; cards become list rows ─────── */
@media (max-width: 700px) {
  .pt-banner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .pt-banner-copy {
    order: -1;
    padding: 96px 20px 36px;
  }
  .pt-banner-sketch { width: 150px; right: -30px; top: 40%; }
  .pt-banner-photo {
    height: 62vw;
    margin-top: -18px;
    clip-path: polygon(0.00% 4.52%, 3.85% 1.47%, 7.69% 3.39%, 11.54% 3.67%, 15.38% 2.39%, 19.23% 3.23%, 23.08% 0.90%, 26.92% 0.89%, 30.77% 1.59%, 34.62% 3.87%, 38.46% 2.65%, 42.31% 2.11%, 46.15% 3.41%, 50.00% 2.78%, 53.85% 2.04%, 57.69% 4.41%, 61.54% 3.96%, 65.38% 1.77%, 69.23% 3.36%, 73.08% 3.12%, 76.92% 4.80%, 80.77% 4.10%, 84.62% 1.98%, 88.46% 5.30%, 92.31% 1.17%, 96.15% 2.61%, 100.00% 4.23%, 100% 100%, 0 100%);
  }

  .pt-stories-head { gap: 12px; }
  .pt-cards { grid-template-columns: 1fr; gap: 14px; }
  .pt-card { flex-direction: row; align-items: stretch; }
  .pt-card-img {
    width: 40%;
    flex-shrink: 0;
    align-self: stretch;
    height: auto;
    min-height: 120px;
    aspect-ratio: auto;
    margin: 10px 0 10px 10px;
    border-radius: 4px;
  }
  .pt-card-body { padding: 12px 14px 14px; gap: 6px; }
  .pt-card-kicker { font-size: 0.625rem; }
  .pt-card-title { font-size: 1.05rem; }
  .pt-card-desc {
    flex: none;
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}