/*
 * Home page Rent-To-Own / Financing pair.
 *
 * The two homepage cards reuse .hh2-finance-card, but that class is built for
 * the three-up financing page where every card opens with a .hh2-plate header
 * and wraps its copy in .hh2-finance-body. The homepage markup has neither, so
 * the card inherited `padding: 0` and rendered as bare text jammed against a
 * 1px border with two full-bleed black slabs under it.
 *
 * This file only touches the cards inside .hh2-finance-grid on the front page.
 * The plated cards on /finance-options/, /special-order/ and the .hh2-finance-links
 * button rows on the shed, grill and RTO bands are left exactly as they are.
 */

.home .hh2-finance-grid {
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

.home .hh2-finance-grid > .hh2-finance-card {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--hh-gray-200);
  border-top: 3px solid var(--hh-gray-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.home .hh2-finance-grid > .hh2-finance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* ---- Type ---- */

.home .hh2-finance-grid > .hh2-finance-card .eyebrow {
  margin-bottom: 1.15rem;
}

.home .hh2-finance-grid > .hh2-finance-card h3 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.home .hh2-finance-grid > .hh2-finance-card p {
  margin-bottom: 1.75rem;
  max-width: 42ch;
  font-size: 1.02rem;
  line-height: 1.65;
}

/*
 * Actions sit on a hairline shelf pinned to the bottom of the card, so the two
 * cards line their buttons up no matter how the copy above them runs.
 */
.home .hh2-finance-grid > .hh2-finance-card .hh2-finance-links {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hh-gray-200);
}

.home .hh2-finance-grid > .hh2-finance-card .hh2-finance-links .btn {
  width: auto;
  justify-content: center;
}

/* ============================================
   LEAD CARD — RENT-TO-OWN
   ============================================
   The RTO card carries the offer that needs no credit, so it takes the dark
   treatment and the one yellow button in the band. The financing card stays
   light. Side by side on the gray strip you can tell them apart at a glance
   without either shouting.
*/

.home .hh2-finance-grid > .hh2-finance-card:first-child {
  background: var(--hh-black-deep);
  border-color: var(--hh-black-deep);
  border-top-color: var(--hh-yellow);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child h3 {
  color: var(--hh-white);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child p {
  color: rgba(255, 255, 255, 0.70);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child .hh2-finance-links {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* Primary action: the one solid yellow in the section. */
.home .hh2-finance-grid > .hh2-finance-card:first-child .btn.btn--dark:first-child {
  background: var(--hh-yellow);
  color: var(--hh-black);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child .btn.btn--dark:first-child:hover {
  background: var(--hh-yellow-hover);
  color: var(--hh-black);
  transform: translateY(-2px);
}

/* Secondary action: ghost, for customers who already have an agreement. */
.home .hh2-finance-grid > .hh2-finance-card:first-child .btn.btn--dark:not(:first-child) {
  background: transparent;
  color: var(--hh-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.home .hh2-finance-grid > .hh2-finance-card:first-child .btn.btn--dark:not(:first-child):hover {
  background: var(--hh-white);
  color: var(--hh-black);
  box-shadow: inset 0 0 0 1px var(--hh-white);
  transform: translateY(-2px);
}

/* ============================================
   FINANCING CARD
   ============================================ */

.home .hh2-finance-grid > .hh2-finance-card:nth-child(2) {
  background: var(--hh-white);
  border-top-color: var(--hh-black);
}

/*
 * Yellow type on white is unreadable, so on the light card the label goes dark
 * and only its rule stays yellow.
 */
.home .hh2-finance-grid > .hh2-finance-card:nth-child(2) .eyebrow {
  color: var(--hh-gray-900);
}

.home .hh2-finance-grid > .hh2-finance-card:nth-child(2) p {
  color: var(--hh-gray-700);
}

/* ---- Focus ---- */

.home .hh2-finance-grid > .hh2-finance-card .btn:focus-visible {
  outline: 3px solid var(--hh-yellow);
  outline-offset: 3px;
}

.home .hh2-finance-grid > .hh2-finance-card:nth-child(2) .btn:focus-visible {
  outline-color: var(--hh-black);
}

/* ---- Small screens ---- */

@media (max-width: 800px) {
  .home .hh2-finance-grid > .hh2-finance-card .hh2-finance-links .btn {
    flex: 1 1 14rem;
  }
}

@media (max-width: 480px) {
  .home .hh2-finance-grid > .hh2-finance-card .hh2-finance-links {
    flex-direction: column;
    align-items: stretch;
  }

  .home .hh2-finance-grid > .hh2-finance-card .hh2-finance-links .btn {
    flex: none;
    width: 100%;
  }
}

/*
 * .animate-in parks these cards at opacity 0 until the scroll observer adds
 * .visible. With motion turned off there is nothing to reveal, so show them
 * outright rather than leaving them dependent on a scroll handler.
 */
@media (prefers-reduced-motion: reduce) {
  .home .hh2-finance-grid > .hh2-finance-card,
  .home .hh2-finance-grid > .hh2-finance-card:hover,
  .home .hh2-finance-grid > .hh2-finance-card .btn:hover {
    opacity: 1;
    transform: none;
    transition: none;
  }
}