/* Credit cards landing — extends checking-account.css */

/* Full-width headline above the two-column row so copy stays shorter and art can sit further left */
.credit-cards-page .cc-hero .checking-hero__title-band {
  box-sizing: border-box;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.credit-cards-page .cc-hero .checking-hero__title-band .checking-hero__title {
  /* Bottom spacing before copy/visual row — keep tight so row aligns with title rhythm */
  margin: 0 0 clamp(0.65rem, 1.6vw, 1rem);
  max-width: 49rem;
}

@media (max-width: 960px) {
  .credit-cards-page .cc-hero .checking-hero__title-band {
    text-align: center;
  }

  .credit-cards-page .cc-hero .checking-hero__title-band .checking-hero__title {
    margin-left: auto;
    margin-right: auto;
  }
}

/* checking-account.css sets padding-bottom on .checking-hero — tighter than default */
.credit-cards-page.checking-page .checking-hero.cc-hero {
  padding-bottom: 40px;
  margin-bottom: 0;
  overflow: visible;
}

/*
 * Hero copy + visual live in .cc-hero__row (HTML). Desktop: .checking-hero__inner uses
 * display:contents so the row is laid out directly under .checking-hero — bypasses
 * checking-account.css grid { align-items:center } on .checking-hero__inner entirely.
 */
.credit-cards-page.checking-page .cc-hero__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.credit-cards-page.checking-page .cc-hero__row .checking-hero__copy,
.credit-cards-page.checking-page
  .cc-hero__row
  .checking-hero__visual.cc-hero__visual {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

.credit-cards-page.checking-page
  .cc-hero__row
  .checking-hero__visual.cc-hero__visual {
  box-sizing: border-box;
}

@media (min-width: 961px) {
  /* Remove inner from layout; row picks up max-width / horizontal padding */
  .credit-cards-page.checking-page
    .checking-hero
    .checking-hero__inner.cc-hero__inner {
    display: contents !important;
  }

  .credit-cards-page.checking-page .cc-hero__row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start !important;
    align-content: flex-start;
    justify-content: flex-start;
    gap: clamp(4.25rem, 10vw, 7.5rem);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    overflow-x: visible;
    /* Sit closer to title band (same max-width / horizontal padding as title-band) */
    margin-top: clamp(-0.65rem, -1.5vw, 0);
  }

  .credit-cards-page.checking-page .cc-hero__row .checking-hero__copy {
    flex: 0 1 min(38rem, 100%);
    max-width: min(38rem, 100%);
    min-width: 0;
    padding: 0;
    margin: 0;
  }

  .credit-cards-page.checking-page
    .cc-hero__row
    .checking-hero__copy
    .checking-hero__lede,
  .credit-cards-page.checking-page
    .cc-hero__row
    .checking-hero__copy
    .checking-hero__highlights {
    max-width: none;
  }

  .credit-cards-page.checking-page
    .cc-hero__row
    .checking-hero__visual.cc-hero__visual {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    margin-inline: 0;
    padding: 0;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    /*
     * Lift entire visual column: bottom-anchored card stack reads low vs copy + title band.
     * Transform does not affect layout height — pair with the same negative margin-bottom
     * so the hero does not keep a tall empty strip below the cards.
     */
    --cc-hero-visual-lift: clamp(-7.5rem, -14vw, -2.5rem);
    transform: translateY(var(--cc-hero-visual-lift));
    margin-bottom: var(--cc-hero-visual-lift);
  }

  .credit-cards-page.checking-page
    .cc-hero__row
    .checking-hero__visual.cc-hero__visual
    .checking-overview-help-cta__art {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
    transform: none;
  }
}

@media (max-width: 960px) {
  /* Inner is still a grid cell (1 col); center stacked hero like checking-account */
  .credit-cards-page.checking-page .cc-hero__row {
    /* Tighter than default — large gap read as dead space above the card stack */
    gap: clamp(2.75rem, 8vw, 4.25rem);
    margin-top: 0;
  }

  .credit-cards-page.checking-page
    .cc-hero__row
    .checking-hero__visual.cc-hero__visual {
    --cc-hero-visual-lift: clamp(-2.75rem, -7.5vw, -0.75rem);
    transform: translateY(var(--cc-hero-visual-lift));
    margin-bottom: var(--cc-hero-visual-lift);
  }
}

.credit-cards-page .cc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.credit-cards-page .cc-hero__btn-outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.credit-cards-page .cc-hero__btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/*
 * Hero visual — diagonal stack (seven cards). Flex aligns content to top of column;
 * cards inside use bottom+left steps so the fan rises up-right from bottom-left.
 */
.credit-cards-page .cc-hero__visual {
  min-height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 960px) {
  .credit-cards-page .cc-hero__visual {
    justify-content: center;
    align-items: center;
  }
}

.credit-cards-page .cc-hero__visual .checking-overview-help-cta__art {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
}

@media (max-width: 960px) {
  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__art {
    justify-content: center;
    align-items: center;
    max-width: min(100%, 560px);
  }
}

.credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack-wrap {
  width: 100%;
  margin-inline: 0;
  overflow: visible;
}

@media (max-width: 960px) {
  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack-wrap {
    margin-inline: auto;
  }
}

/*
 * Diagonal fan: front card bottom-left, each step up-right (~same angle as
 * checking-overview). Uses bottom + left offsets — not top anchoring (that flips the line).
 */
.credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack {
  --shift-x: clamp(0.68rem, 3.1vw, 3.05rem);
  --shift-y: clamp(0.58rem, 2.8vw, 2.85rem);
  position: relative;
  width: 100%;
  min-width: 0;
  /* Shorter box + column translate = cards optically line up with copy / title rhythm */
  min-height: clamp(19rem, 60vw, 27rem);
  height: clamp(19.25rem, 62vw, 27.25rem);
  isolation: isolate;
}

.credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack-card {
  --step: 0;
  position: absolute;
  left: calc(var(--step) * var(--shift-x));
  bottom: calc(var(--step) * var(--shift-y));
  width: 64%;
  max-width: 300px;
  min-width: 0;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  z-index: var(--z, 1);
}

/* Featured (1–3) in front, then Rewards (4–7) */
.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(1) {
  --step: 0;
  --z: 7;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(2) {
  --step: 1;
  --z: 6;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(3) {
  --step: 2;
  --z: 5;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(4) {
  --step: 3;
  --z: 4;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(5) {
  --step: 4;
  --z: 3;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(6) {
  --step: 5;
  --z: 2;
}

.credit-cards-page
  .cc-hero__visual
  .checking-overview-help-cta__stack-card:nth-child(7) {
  --step: 6;
  --z: 1;
}

@media (max-width: 800px) {
  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__art {
    max-width: min(100%, 460px);
    margin-inline: auto;
  }

  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack-wrap {
    max-width: 420px;
    margin-inline: auto;
  }

  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack {
    --shift-x: clamp(0.52rem, 2.85vw, 1.15rem);
    --shift-y: clamp(0.48rem, 2.45vw, 0.88rem);
    min-height: clamp(18rem, 70vw, 23rem);
    height: clamp(18.25rem, 72vw, 23.25rem);
  }

  .credit-cards-page .cc-hero__visual .checking-overview-help-cta__stack-card {
    width: 58%;
    max-width: 228px;
  }
}

/* Apply flow — member choice modal (reference: modern banking “get started”) */
.cc-apply-modal__panel {
  max-width: 26.5rem;
}

.cc-apply-start__header {
  padding: 1.35rem 3rem 1.35rem 1.5rem;
  /* Match .checking-hero on banking landings (navy palette + deep blue anchor) */
  background: linear-gradient(
    135deg,
    var(--color-navy-900) 0%,
    var(--color-navy-800) 48%,
    #1e3a5c 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cc-apply-start__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: 600;
  text-align: center;
  color: #fff;
  letter-spacing: 0.01em;
}

.cc-apply-start__body {
  padding: 1.65rem 2rem 1.5rem;
}

.cc-apply-start__question {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy-900);
  text-align: center;
}

.cc-apply-start__lede,
.cc-apply-start__hint {
  margin: 0 0 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-slate-600);
  text-align: center;
}

.cc-apply-start__hint {
  margin-bottom: 1.35rem;
  font-weight: 500;
  color: var(--color-navy-800);
}

.cc-apply-start__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cc-apply-start__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.cc-apply-start__btn--outline {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-white);
}

.cc-apply-start__btn--outline:hover {
  background: rgba(42, 111, 168, 0.06);
  color: #1d4ed8;
  border-color: #1d4ed8;
}

.cc-apply-start__btn--solid {
  border: 2px solid var(--color-navy-900);
  color: var(--color-white);
  background: var(--color-navy-900);
  box-shadow: 0 4px 14px rgba(45, 66, 96, 0.22);
}

.cc-apply-start__btn--solid:hover {
  background: var(--color-navy-800);
  border-color: var(--color-navy-800);
  color: var(--color-white);
}

.cc-apply-start__btn:focus-visible {
  outline: 3px solid rgba(42, 111, 168, 0.45);
  outline-offset: 2px;
}

.cc-apply-modal__close {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.cc-apply-modal__close:hover {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
}

@media (max-width: 380px) {
  .cc-apply-start__actions {
    grid-template-columns: 1fr;
  }
}

/* —— Card catalog (cco components from accounts/credit-cards-overview.css) —— */
.credit-cards-page .cco.cc-banking-catalog {
  font-size: inherit;
  line-height: inherit;
  padding-bottom: 0;
  background: transparent;
}

/* Align catalog column with site `.container` (1400px / 1.5rem gutters) */
.credit-cards-page .cc-catalog-section .cco-wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}

.credit-cards-page .cc-catalog-section .cco-section:first-of-type {
  margin-top: 0;
}

.credit-cards-page #browse-cards {
  scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

.credit-cards-page .cc-catalog-section .cco-section {
  scroll-margin-top: clamp(5rem, 12vh, 7rem);
}

/* Three-column category comparison */
.credit-cards-page .checking-compare--cc-categories {
  min-width: 640px;
}

@media (min-width: 960px) {
  .credit-cards-page .checking-compare-wrap--cc-categories {
    max-width: min(100%, 72rem);
  }
}

/* Stack card artwork above product name (matches in-app catalog layout) */
.credit-cards-page #featured .cco-card__identity,
.credit-cards-page #rewards .cco-card__identity,
.credit-cards-page #travel .cco-card__identity,
.credit-cards-page #cash-back-cards .cco-card__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.65rem, 2vw, 1rem);
  width: 100%;
  text-align: center;
}

/* Match accounts overview catalog refinements (IDs renamed on public page) */
.credit-cards-page #featured .cco-card__name,
.credit-cards-page #rewards .cco-card__name,
.credit-cards-page #travel .cco-card__name,
.credit-cards-page #cash-back-cards .cco-card__name {
  display: block;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding-top: 0.15rem;
  text-align: center;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--cco-blue-dark, #174a7a);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

/* Explore featured cards: 21rem-wide frame, shared card aspect (no square letterboxing) */
.credit-cards-page #featured .cco-card__thumb--art {
  display: block;
  width: min(100%, 21rem);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 152 / 100;
  height: auto;
}

.credit-cards-page #rewards .cco-card__thumb--art,
.credit-cards-page #travel .cco-card__thumb--art,
.credit-cards-page #cash-back-cards .cco-card__thumb--art {
  display: block;
  width: min(100%, 17rem);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--cco-card-art-ratio, 152 / 100);
  height: auto;
}

.credit-cards-page #featured .cco-card__thumb--art img,
.credit-cards-page #rewards .cco-card__thumb--art img,
.credit-cards-page #travel .cco-card__thumb--art img,
.credit-cards-page #cash-back-cards .cco-card__thumb--art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

/* Align “Card details” + Apply across rows (shared overview CSS put auto-margin only on .cco-card__foot) */
.credit-cards-page .cco-card__details {
  margin-top: auto;
  margin-bottom: 0;
}

.credit-cards-page .cco-card__foot {
  margin-top: 0;
}

/* Catalog card “Apply now” — public-page blue gradient (overrides shared .cco-card__btn--primary). */
.credit-cards-page
  .cco
  .cco-card__foot
  a.cco-card__btn--primary[data-cc-modal-open],
.credit-cards-page
  .cco
  .cco-card__foot
  a.cco-card__btn--primary[data-cc-modal-open]:visited {
  color: #fff;
  background: linear-gradient(180deg, #2493d6 0%, #1a6fa8 100%);
  border: none;
  box-shadow: none;
}

.credit-cards-page
  .cco
  .cco-card__foot
  a.cco-card__btn--primary[data-cc-modal-open]:hover {
  filter: brightness(1.06);
  border: none;
  box-shadow: none;
}

.credit-cards-page
  .cco
  .cco-card__foot
  a.cco-card__btn--primary[data-cc-modal-open]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}