/* =========================================================================
   Template 3 - "The Showcase"
   Aspire Smiles BAU. Loads after aspire.css + styles.css. Apple-style rounded
   cards, hero photo with floating glass chips beside the lead form.
   ========================================================================= */

.t3-hero { background: var(--as-smoke); position: relative; overflow: hidden; }
.t3-hero__inner { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) 40px clamp(48px, 6vw, 84px); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 3.5vw, 56px); align-items: stretch; }

/* showcase photo panel with floating glass chips */
.t3-showcase { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 540px; }
.t3-showcase > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.t3-showcase__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,29,.35) 0%, rgba(20,23,29,0) 32%, rgba(20,23,29,.55) 100%); }
.t3-showcase__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 40px); z-index: 2; }
.t3-showcase__copy .eyebrow { margin-bottom: 16px; }
.t3-showcase__copy h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -.015em; color: #fff; margin: 0; text-wrap: balance; }
.t3-showcase__copy p { font-family: var(--font-body); font-size: var(--text-17); line-height: 1.55; color: rgba(255,255,255,.9); margin: 16px 0 0; max-width: 440px; }

/* glass chips */
.t3-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.32); box-shadow: var(--shadow-md); color: #fff; }
.t3-chip__ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.t3-chip__ic svg { width: 19px; height: 19px; color: #fff; }
.t3-chip__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-16); line-height: 1.1; }
.t3-chip__s { font-family: var(--font-body); font-size: var(--text-12); color: rgba(255,255,255,.82); margin-top: 2px; }
.t3-chip--rating { top: 22px; right: 22px; }
.t3-chip--rating .stars { color: var(--as-gold-soft); }
.t3-chip--parking { top: 142px; left: 22px; }

/* form card */
.t3-formcard { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: clamp(26px, 2.6vw, 38px); align-self: center; }

/* scarcity inside the form card */
.t3-scarcity { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--as-gold-wash); }
.t3-scarcity__num { font-family: var(--font-display); font-weight: 300; font-size: 46px; line-height: .8; color: var(--as-teal); flex: none; }
.t3-scarcity__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-14); color: var(--as-ink); line-height: 1.25; }
.t3-scarcity__s { font-family: var(--font-body); font-size: var(--text-12); color: var(--as-ink-2); margin-top: 3px; }

/* ---------- Showcase card grid ------------------------------------------ */
.t3-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 56px; }
.t3-card { background: #fff; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--as-cloud); display: flex; flex-direction: column; }
.t3-card--media { grid-column: span 7; position: relative; min-height: 360px; }
.t3-card--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t3-card--media .t3-card__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,29,0) 40%, rgba(20,23,29,.7) 100%); }
.t3-card--media .t3-card__label { position: absolute; left: 0; bottom: 0; padding: clamp(24px, 3vw, 36px); z-index: 2; }
.t3-card--media .t3-card__label h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: var(--text-24); margin: 0; }
.t3-card--media .t3-card__label p { color: rgba(255,255,255,.88); font-family: var(--font-body); font-size: var(--text-14); margin: 8px 0 0; max-width: 360px; line-height: 1.55; }
.t3-card--feat { grid-column: span 5; padding: clamp(28px, 3vw, 40px); justify-content: center; background: var(--as-ink); color: #fff; }
.t3-card--feat .t3-card__ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--as-gold-soft); display: grid; place-items: center; margin-bottom: 20px; }
.t3-card--feat .t3-card__ic svg { width: 26px; height: 26px; }
.t3-card--feat h3 { color: #fff; font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.t3-card--feat p { color: rgba(255,255,255,.8); font-family: var(--font-body); font-size: var(--text-16); line-height: 1.6; margin: 14px 0 0; }
.t3-card--sm { grid-column: span 4; padding: clamp(26px, 2.6vw, 34px); }
.t3-card--sm .t3-card__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--as-gold-wash); color: var(--as-teal); display: grid; place-items: center; margin-bottom: 18px; }
.t3-card--sm .t3-card__ic svg { width: 24px; height: 24px; }
.t3-card--sm h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-19); color: var(--as-ink); margin: 0 0 8px; letter-spacing: -.005em; }
.t3-card--sm p { font-family: var(--font-body); font-size: var(--text-14); line-height: 1.6; color: var(--as-ink-2); margin: 0; }

@media (max-width: 980px) {
  .t3-hero__inner { grid-template-columns: 1fr; }
  .t3-showcase { order: 1; min-height: 340px; }
  .t3-formcard { order: 2; }
  .t3-grid { grid-template-columns: 1fr; }
  .t3-card--media, .t3-card--feat, .t3-card--sm { grid-column: auto; }
  .t3-card--media { min-height: 300px; }
}
@media (max-width: 620px) {
  .t3-chip--parking { display: none; }
}