/* couples.css — the /couples.html hub, layered on styles.css */

.cp-page { padding: 0 0 4rem; }
.cp-page .container { max-width: 980px; }

/* ── Hero ──
   Photographic banner that fades into the tan page background, matching the
   treatment used on blog article heroes. */
/* Header is 40px logo + 2 x 0.7rem padding + 1px border. The hero is pulled up
   by exactly that so the photo starts at the very top of the page and scrolls
   under the translucent sticky header, rather than starting below a flat tan
   band. min-height compensates so the visible banner keeps its size. */
.cp-hero {
  --cp-header-h: 67px;
  position: relative;
  margin-top: calc(-1 * var(--cp-header-h));
  min-height: calc(clamp(360px, 48vw, 520px) + var(--cp-header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 3rem;
  background: var(--bg-dark, #C4965A);
}

.cp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  /* Very slow drift so the banner breathes instead of sitting dead. Scaled
     slightly past 1 at both ends so no edge is ever exposed. */
  animation: cpHeroDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes cpHeroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.6%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-hero-img { animation: none; }
}

/* Darkens the photo so white heading text clears contrast anywhere on it. */
.cp-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 11, 4, 0.86) 0%,
    rgba(18, 11, 4, 0.62) 38%,
    rgba(18, 11, 4, 0.28) 68%,
    rgba(18, 11, 4, 0.10) 100%);
}

/* Blends the bottom edge into the page tan so there's no hard seam. */
.cp-hero-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(215,168,110,0) 0%, var(--bg, #D7A86E) 100%);
}

.cp-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Must clear the sticky header the hero now runs underneath, or the
     breadcrumb ends up hidden behind it on short screens. */
  padding-top: calc(var(--cp-header-h) + 1.25rem);
  padding-bottom: 2.5rem;
}

.cp-hero-badge {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  /* --accent-pink (#E8567F) only reaches 3.46:1 against white, which fails AA
     for text this small. The darker brand pink clears it. */
  background: var(--accent-pink-dark, #D14068);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-hero h1 {
  max-width: 760px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 0.85rem;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.cp-lead {
  max-width: 640px;
  font-size: 1.1rem;
  line-height: 1.68;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.cp-breadcrumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1rem;
  /* Sits directly on the photo, so it needs its own shadow to stay legible
     over the bright parts of the image. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.cp-breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cp-breadcrumb a:hover { text-decoration: underline; }

.cp-section { margin-bottom: 3.5rem; }
.cp-section > h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 1.5rem;
}

/* ── Problem router cards ── */

.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.cp-card {
  background: var(--bg-cream, #FDF6EC);
  border: 1px solid rgba(184, 137, 58, 0.22);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(45, 31, 16, 0.10);
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}

.cp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(45, 31, 16, 0.20);
}

/* Fixed-height image block. The chip pins to the top, the title rides the
   gradient at the bottom — same treatment as the blog cards. */
.cp-card-media {
  position: relative;
  height: 210px;
  flex: 0 0 210px;
  overflow: hidden;
}

.cp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s var(--ease, ease);
}

.cp-card:hover .cp-card-media img { transform: scale(1.06); }

/* Translucent black wash up from the bottom so white type stays readable
   over any part of the artwork. */
.cp-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(16, 10, 3, 0.95) 0%,
    rgba(16, 10, 3, 0.84) 28%,
    rgba(16, 10, 3, 0.48) 55%,
    rgba(16, 10, 3, 0.12) 78%,
    rgba(16, 10, 3, 0.00) 100%);
}

.cp-card-eyebrow {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  inset-inline-start: 0.9rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(16, 10, 3, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #F7D9A6;
}

.cp-card h3 {
  position: absolute;
  z-index: 2;
  inset-inline: 1.15rem;
  bottom: 1rem;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.26;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.cp-card > p {
  font-size: 0.96rem;
  line-height: 1.65;
  margin: 1.15rem 1.4rem 1rem;
  color: #5A4632;
}

.cp-links { list-style: none; margin: 0 1.4rem 1rem; padding: 0; }
.cp-links li { margin-bottom: 0.45rem; }
.cp-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text, #2A2A2A);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-gold-border, rgba(0, 0, 0, 0.15));
}
.cp-links a:hover { border-bottom-color: var(--link-on-bg, #4A3208); }

.cp-card-more {
  margin: auto 1.4rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #8A5A12;
  text-decoration: none;
}
.cp-card-more:hover { text-decoration: underline; }

/* ── Method ── */

.cp-method {
  background: var(--bg-cream, #FDF6EC);
  border: 1px solid rgba(184, 137, 58, 0.22);
  box-shadow: 0 6px 20px rgba(45, 31, 16, 0.08);
  border-radius: 20px;
  padding: 2rem 2rem 2.25rem;
}
.cp-method > p { font-size: 1.03rem; line-height: 1.75; margin: 0 0 1rem; }

.cp-method-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 1.25rem;
}

.cp-step { padding-top: 0.25rem; }
.cp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-gold, #C4965A);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.cp-step h3 { font-size: 1.03rem; margin: 0 0 0.35rem; }
.cp-step p { font-size: 0.93rem; line-height: 1.6; margin: 0; color: #5A4632; }

.cp-method-cta { margin: 0; }
.cp-method-cta a { font-weight: 600; color: var(--link-on-bg, #4A3208); text-decoration: underline; }
.cp-method-cta a:hover { text-decoration: underline; }

/* ── Apps ──
   Deliberately a plain link list, not cards. The full app cards live only on
   the home page (rendered from Firestore); duplicating them here would mean
   two places to keep in sync and would bury the problem-router above. */

.cp-section-sub {
  max-width: 640px;
  margin: -0.75rem 0 1.75rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

.cp-app-links {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 780px;
}

.cp-app-links li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--accent-gold-border, rgba(184, 137, 58, 0.3));
}

.cp-app-links li:first-child { padding-top: 0; }
.cp-app-links li:last-child { border-bottom: none; }

.cp-app-links a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--link-on-bg, #4A3208);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cp-app-links span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text, #2D1F10);
}

/* ── FAQ ── */

.cp-faq-item { border-bottom: 1px solid var(--accent-gold-border, rgba(0, 0, 0, 0.1)); }

.cp-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.cp-faq-item summary::-webkit-details-marker { display: none; }
.cp-faq-item summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--link-on-bg, #4A3208);
}
.cp-faq-item[open] summary::after { content: "\2212"; }

.cp-faq-item p {
  margin: 0 0 1.1rem;
  padding-inline-end: 2.2rem;
  font-size: 0.98rem;
  line-height: 1.72;
  color: #5A4632;
}
.cp-faq-item p a { color: var(--link-on-bg, #4A3208); }

[dir="rtl"] .cp-faq-item summary { padding: 1.05rem 0 1.05rem 2.2rem; }

/* ── Closing CTA ── */

.cp-cta {
  text-align: center;
  background: var(--bg-cream, #FDF6EC);
  border: 1px solid rgba(184, 137, 58, 0.22);
  box-shadow: 0 6px 20px rgba(45, 31, 16, 0.08);
  border-radius: 20px;
  padding: 2.25rem 1.5rem 2.5rem;
}
.cp-cta h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 0.6rem; }
.cp-cta p {
  max-width: 560px;
  margin: 0 auto 1.5rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Safety net: nothing inside the closing CTA should ever fall back to the
   browser's default blue. */
.cp-cta a { color: var(--link-on-bg, #4A3208); }

.cp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--accent-gold-border, rgba(184, 137, 58, 0.4));
  background: rgba(184, 137, 58, 0.10);
  font-size: 0.94rem;
  font-weight: 600;
  color: #5C3F0E;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease, ease), background 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease);
}

.cp-btn:hover {
  transform: translateY(-2px);
  background: rgba(184, 137, 58, 0.2);
  box-shadow: 0 8px 18px rgba(45, 31, 16, 0.14);
}

.cp-btn.cp-btn-primary {
  background: var(--accent-pink-dark, #D14068);
  border-color: var(--accent-pink-dark, #D14068);
  color: #fff;
}

.cp-btn.cp-btn-primary:hover {
  background: #B8355A;
  border-color: #B8355A;
  color: #fff;
}

@media (max-width: 560px) {
  .cp-cta-actions { flex-direction: column; }
  .cp-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-btn { transition: none; }
  .cp-btn:hover { transform: none; }
}

@media (max-width: 700px) {
  .cp-method { padding: 1.5rem 1.25rem 1.75rem; }
  .cp-card { padding: 1.25rem 1.3rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-card, .cp-card-media img, .cp-tool { transition: none; }
  .cp-card:hover, .cp-tool:hover { transform: none; }
  .cp-card:hover .cp-card-media img { transform: none; }
}

/* App tie-in line inside each problem card */
.cp-card-app {
  margin: 0 1.4rem 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(184, 137, 58, 0.4);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #5A4632;
}
.cp-card-app a { color: #8A5A12; font-weight: 700; text-decoration: none; }
.cp-card-app a:hover { text-decoration: underline; }

/* Store links inside an app card (apps.html) */
.cp-app-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}
.cp-app-stores a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--accent-gold-border, rgba(184, 137, 58, 0.35));
  background: rgba(184, 137, 58, 0.10);
  font-size: 0.86rem;
  font-weight: 600;
  color: #6B4A12;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.cp-app-stores a:hover {
  background: rgba(184, 137, 58, 0.2);
  border-color: var(--accent-gold, #B8893A);
}

/* ── App cards ──
   Used by apps.html only. couples.html deliberately uses the plain
   .cp-app-links list instead — full cards live on the home page and the
   dedicated apps page, not scattered across the site. */
.cp-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.cp-app {
  display: flex;
  flex-direction: column;
  background: var(--bg-cream, #FDF6EC);
  border: 1px solid rgba(184, 137, 58, 0.22);
  border-radius: 18px;
  padding: 1.5rem 1.6rem 1.6rem;
  box-shadow: 0 6px 20px rgba(45, 31, 16, 0.10);
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}

.cp-app:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(45, 31, 16, 0.18);
}

.cp-app-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.cp-app-icon {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(45, 31, 16, 0.18);
}

.cp-app-titles { min-width: 0; }

.cp-app-titles h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 0.15rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cp-app-tag {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8A5A12;
}

/* Shalema is an individual app for women, not a couples tool — the badge keeps
   that unambiguous alongside the couples apps. */
.cp-app-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(184, 137, 58, 0.18);
  border: 1px solid rgba(184, 137, 58, 0.4);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6B4A12;
  white-space: nowrap;
}

.cp-app-desc {
  margin: 0 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #5A4632;
}

.cp-app-points {
  margin: 0 0 1rem;
  padding-inline-start: 1.1rem;
}

.cp-app-points li {
  margin-bottom: 0.45rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #5A4632;
}

.cp-app-fit {
  margin: 0 0 1.1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: rgba(184, 137, 58, 0.12);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #4A3208;
}

.cp-app-fit strong { color: #2D1F10; }

.cp-app-link {
  margin-top: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: #8A5A12;
  text-decoration: none;
}

.cp-app-link::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.25s var(--ease, ease);
}

.cp-app:hover .cp-app-link::after { transform: translateX(4px); }

[dir="rtl"] .cp-app-link::after { content: " \2190"; }
[dir="rtl"] .cp-app:hover .cp-app-link::after { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .cp-app { transition: none; }
  .cp-app:hover { transform: none; }
}