/* Prototype stylesheet for the custom-order ladder and the rug-type pages.
 *
 * Deliberately a NEW file rather than an edit to made_to_order.css, because that one is
 * shared by the live /made-to-order and /moroccan-rugs — editing it would change both
 * live pages, and the whole point of these prototypes is that the originals stay put for
 * comparison.
 *
 * Prefix: rp-  (rug pages). Tokens come from css/anou-tokens.css, loaded by base.html.
 * Unlike made_to_order.css, this file actually uses the var(--...) tokens.
 */

.rp { font-family: var(--font-body), sans-serif; color: var(--ink-body); }
.rp a { color: var(--anou-blue); }
.rp a:hover { color: var(--anou-blue-dark); }

/* full-bleed bands: the shell constrains width, these sections should not be */
.rp-page.container { width: 100%; max-width: none; margin: 0; padding: 0; }

.rp-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* ---------- hero ---------- */
.rp-hero { position: relative; }
.rp-hero img,
.rp-hero video { width: 100%; height: 430px; object-fit: cover; display: block; }
.rp-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(24, 30, 42, .35), rgba(24, 30, 42, .72));
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 56px;
}
.rp-hero h1 {
  margin: 0 0 14px 0;
  font-family: var(--font-display), sans-serif; font-weight: 900;
  font-size: 40px; line-height: 1.15; color: #fff; max-width: 760px;
}
.rp-hero-copy {
  margin: 0; font-size: 15.5px; line-height: 1.7; color: #e5e8ee; max-width: 680px;
}
.rp-eyebrow {
  margin: 0 0 12px 0; font-family: var(--font-ui), sans-serif;
  font-size: 11px; letter-spacing: 3px; color: var(--anou-blue);
}
.rp-eyebrow-light { color: var(--anou-blue-3); }

/* ---------- generic type ---------- */
.rp h2 {
  margin: 0 0 14px 0; font-family: var(--font-display), sans-serif; font-weight: 900;
  font-size: var(--text-h2); line-height: 1.25; color: var(--ink);
}
.rp h3 {
  margin: 0 0 10px 0; font-family: var(--font-display), sans-serif; font-weight: 900;
  font-size: var(--text-h3); line-height: 1.3; color: var(--ink);
}
.rp-body { margin: 0 0 14px 0; font-size: 15.5px; line-height: 1.75; }
.rp-body-last { margin-bottom: 0; }
.rp-note { margin: 14px 0 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }

.rp-section { padding: 52px 0; border-bottom: 1px solid var(--border); }
.rp-band { background: var(--anou-blue-panel); }
.rp-band-tint { background: #fafbfd; }

/* ---------- editorial prose ---------- */
.rp-prose { max-width: 760px; }
.rp-prose > div + div { margin-top: 34px; }

/* ---------- product grid ---------- */
.rp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin: 26px 0 10px 0;
}
.rp-card { text-decoration: none; color: inherit; display: block; }
.rp-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: #f4f5f7;
}
.rp-card-name {
  margin: 10px 0 2px 0; font-family: var(--font-ui), sans-serif;
  font-size: 14px; color: var(--ink); line-height: 1.35;
}
.rp-card-meta { margin: 0; font-size: 13px; color: var(--ink-muted); }
.rp-card-price { margin: 4px 0 0 0; font-size: 13.5px; color: var(--ink); }

/* ---------- empty state ---------- */
.rp-empty {
  border: 1px solid var(--anou-blue-border); background: var(--anou-blue-panel);
  padding: 28px 30px; max-width: 760px;
}

/* ---------- groups strip ---------- */
.rp-groups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rp-groups a {
  border: 1px solid var(--border); padding: 9px 14px;
  font-family: var(--font-ui), sans-serif; font-size: 13px; text-decoration: none;
}
.rp-groups a:hover { border-color: var(--anou-blue); }

/* ---------- type cards (the "do you know what you want" band) ---------- */
.rp-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.rp-type-card {
  border: 1px solid var(--border); padding: 20px; text-decoration: none; display: block;
  color: inherit; background: #fff;
}
.rp-type-card:hover { border-color: var(--anou-blue); }
.rp-type-card h3 { margin-bottom: 6px; font-size: 17px; }
.rp-type-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- two-column media grids ---------- */
.rp-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 52px 0; border-bottom: 1px solid var(--border);
}
.rp-split img, .rp-split video { width: 100%; display: block; }

/* ---------- exit band ---------- */
.rp-exits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.rp-exits-two { grid-template-columns: repeat(2, 1fr); max-width: 820px; }
.rp-exit {
  border: 1px solid var(--border); background: #fff; padding: 22px;
  display: flex; flex-direction: column;
}
.rp-exit h3 { font-size: 17px; }
.rp-exit p { margin: 0 0 16px 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.rp-exit a { margin-top: auto; font-family: var(--font-ui), sans-serif; font-size: 13px; }

/* ---------- buttons ---------- */
/* color carries !important: in Safari the solid button's label was rendering in link
   blue (invisible on the blue fill) despite nothing in our sheets outranking this
   class — the ghost variant, whose text IS blue, was unaffected, which is how it went
   unnoticed. The override pins every link state so no anchor rule can win. */
.rp-btn, .rp-btn:link, .rp-btn:visited {
  display: inline-block; background: var(--anou-blue); color: #fff !important;
  text-decoration: none;
  font-family: var(--font-ui), sans-serif; font-size: 13px; letter-spacing: 1.5px;
  padding: 15px 30px;
}
.rp-btn:hover { background: var(--anou-blue-dark); color: #fff !important; }
.rp-btn-ghost, .rp-btn-ghost:link, .rp-btn-ghost:visited, .rp-btn-ghost:hover {
  background: transparent; color: var(--anou-blue) !important;
  border: 1px solid var(--anou-blue-border);
}
.rp-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- prototype banner ---------- */
.rp-proto {
  background: #2e333d; color: #fff; padding: 10px 20px; text-align: center;
  font-family: var(--font-ui), sans-serif; font-size: 12px; letter-spacing: 1px;
}
.rp-proto a { color: #85A9E4; }

@media (max-width: 900px) {
  .rp-hero img, .rp-hero video { height: 340px; }
  .rp-hero-overlay { padding: 0 20px; }
  .rp-hero h1 { font-size: 28px; }
  .rp-inner { padding: 0 20px; }
  .rp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .rp-types { grid-template-columns: 1fr 1fr; }
  .rp-exits { grid-template-columns: 1fr; }
  .rp-split { grid-template-columns: 1fr; gap: 28px; }
  .rp-section { padding: 40px 0; }
}


/* ---------- ways-to-commission band (REVIEW_CHANGES.md §5) ---------- */
.ways-title {
  margin: 0 0 4px 0;
  font-family: var(--font-display), sans-serif; font-weight: 900;
  font-size: 26px; color: var(--ink);
}
.ways-list { max-width: 900px; margin-top: 18px; }
.ways-row {
  display: grid; grid-template-columns: 150px 1fr 110px 30px;
  gap: 24px; align-items: center;
  padding: 20px 0; border-top: 1px solid #e5e8ee;
  text-decoration: none; color: inherit;
}
.ways-list > .ways-row:last-of-type,
.ways-list > a:last-of-type { border-bottom: 1px solid #e5e8ee; }
a.ways-row:hover { background: #fafbfd; }
.ways-thumb { width: 150px; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ways-main strong {
  display: block; margin: 0 0 4px 0;
  font-family: var(--font-display), sans-serif; font-weight: 900;
  font-size: 19px; color: var(--ink);
}
.ways-main > span { display: block; font-size: 14px; line-height: 1.6; color: #4b5563; }
.ways-tag {
  font-family: var(--font-ui), sans-serif; font-size: 10.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: #9aa1ad; text-align: right;
}
.ways-arrow { font-size: 18px; color: var(--anou-blue); }

@media (max-width: 700px) {
  .ways-row { grid-template-columns: 96px 1fr 24px; }
  .ways-thumb { width: 96px; }
  .ways-tag { display: none; }
}