/**
 * CD Butterfly Hero — Site Studio component styles.
 *
 * Attached to the "CD Butterfly Hero" component (cpt_cd_butterfly_hero) via the
 * Attach Library element: sffcu_customizations/cd_butterfly_hero.
 *
 * Classes are assigned to each element's "CSS class" field in the Site Studio
 * builder. Colours are the brand palette hexes (Site Studio SCSS tokens are not
 * available inside a module stylesheet): brand-color #0170b9, yellow #fcb813,
 * button-yellow #ea9c00, gray-90 #292929, gray-70 #484848, gray-10 #f2f2f2,
 * very-light-blue #eef5f8.
 */

.cd-hero-section {
  background: #f2f2f2;                    /* gray-10 (default; overridden by cd-bg-* utility) */
  padding-block: clamp(1.5rem, 3vw, 4rem);
  font-family: "HelveticaNeue LT 55 Roman", "Helvetica Neue", Arial, sans-serif;
  color: #292929;                        /* gray-90 */
}

/* Background-color select utilities (component field maps to one of these) */
.cd-bg-gray10        { background: #f2f2f2; }
.cd-bg-white         { background: #ffffff; }
.cd-bg-verylightblue { background: #eef5f8; }

.cd-hero {
  width: 100%;
  /* Match the site's boxed hero: 1409px content inside 64px outer gutters (=1537). */
  max-width: 1537px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 64px);

  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1fr;   /* left (wide) | butterfly | right */
  grid-template-areas:
    "headline headline headline"
    "rate1    fly       ."
    ".        fly       rate2"
    ".        fly       cta"
    "member   member    member"
    "terms    terms     terms";
  column-gap: clamp(1rem, 3vw, 2rem);
  row-gap: clamp(.4rem, 1vw, .9rem);
  align-items: start;                      /* top-align: no tall vertical centering gaps */
}
.cd-hero > * { min-width: 0; }

/* grid-area assignment */
.cd-h-headline { grid-area: headline; align-self: start; margin-bottom: clamp(1rem, 2.5vw, 2rem); }
.cd-h-rate1    { grid-area: rate1;  justify-self: start; text-align: left; }
.cd-h-fly      { grid-area: fly;    place-self: center; min-height: 150px; }  /* holds layout before asset lands */
.cd-h-rate2    { grid-area: rate2;  justify-self: end;   text-align: right; align-self: start; }
.cd-h-rate2 .cd-apy { justify-content: flex-end; }
.cd-h-cta      { grid-area: cta;    justify-self: end;   text-align: right; align-self: start; }
.cd-h-member   { grid-area: member; justify-self: start; margin-top: clamp(.75rem, 2vw, 1.5rem); }  /* decent gap below image */
.cd-h-terms    { grid-area: terms;  justify-self: start; text-align: left; margin-top: .5rem; }

/* typography */
.cd-h-headline {
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}
.cd-rates-intro { font-size: clamp(1.1rem, 2vw, 1.75rem); font-weight: 600; margin: 0 0 .25rem; }

.cd-apy { display: inline-flex; align-items: flex-end; gap: .4rem; flex-wrap: wrap; }
.cd-apy-num  { font-size: clamp(1.75rem, 3.5vw, 3.25rem); font-weight: 800; line-height: 1; }
.cd-apy-unit { font-size: clamp(.9rem, 1.4vw, 1.1rem); font-weight: 700; }
.cd-apy-term { font-size: clamp(.95rem, 1.3vw, 1.25rem); font-weight: 700; color: #292929; }

.cd-h-rate1 .cd-apy-num,
.cd-h-rate1 .cd-apy-unit { color: #fcb813; }          /* yellow — 13-month */
.cd-h-rate1 .cd-apy-unit sup { color: #ea9c00; }      /* button-yellow */
.cd-h-rate2 .cd-apy-num,
.cd-h-rate2 .cd-apy-unit,
.cd-h-rate2 .cd-apy-unit sup { color: #0170b9; }      /* brand-color — 7-month */

.cd-h-terms { font-size: clamp(.65rem, .9vw, .8rem); color: #484848; }

/* Primary CTA tile: button + open-by date beneath it. Buttons use the site's
   existing coh-style-link-button-* styles (via customStyle) — none invented here. */
.cd-h-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.cd-open-by { font-weight: 700; font-size: clamp(.9rem, 1.3vw, 1.1rem); }
.cd-open-by .cd-date { color: #ea9c00; }   /* button-yellow */

/* butterfly image */
.cd-h-fly img { max-width: clamp(200px, 25vw, 375px); height: auto; max-height: clamp(240px, 30vw, 400px); display: block; object-fit: contain; margin-inline: auto; }
/* Hide the broken-image icon until a real asset is set (empty/missing src). */
.cd-h-fly img[src=""], .cd-h-fly img:not([src]) { display: none; }

/* signature: butterfly settles on load */
.cd-h-fly { animation: cd-fly-settle 1100ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes cd-fly-settle {
  0%   { opacity: 0; transform: translateY(14px) scale(.9)  rotate(-2.5deg); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02) rotate(.8deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .cd-h-fly { animation: none; } }

/* ===== Tablet ≤1024: 2 columns, butterfly spans the text stack on the right ===== */
@media (max-width: 1024px) {
  .cd-hero {
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas:
      "headline fly"
      "rate1    fly"
      "rate2    fly"
      "cta      fly"
      "member   member"
      "terms    terms";
    align-items: start;
  }
  .cd-h-headline { grid-column: 1; }
  .cd-h-fly      { justify-self: center; align-self: center; }
  .cd-h-rate2 { justify-self: start; text-align: left; }
  .cd-h-rate2 .cd-apy { justify-content: flex-start; }
  .cd-h-cta   { justify-self: start; align-items: flex-start; text-align: left; }
  .cd-h-member { justify-self: start; }
}

/* ===== Mobile ≤768: 1 column, butterfly AFTER both rates ===== */
@media (max-width: 768px) {
  .cd-hero {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas:
      "headline"
      "rate1"
      "rate2"
      "fly"
      "cta"
      "member"
      "terms";
    text-align: center;
  }
  .cd-h-rate1, .cd-h-rate2 { justify-self: center; text-align: center; }
  .cd-h-rate1 .cd-apy, .cd-h-rate2 .cd-apy { justify-content: center; }
  .cd-h-terms { justify-self: center; text-align: center; margin-top: 1rem; }
  .cd-h-fly   { justify-self: center; }
  .cd-h-cta   { justify-self: center; align-items: center; text-align: center; }
  .cd-h-member { justify-self: center; }
}

@media (max-width: 480px) {
  .cd-hero { gap: .75rem; }
}