/*
 * Hales Captains — shared component styles for Captain Right Away + Captain Coupon.
 *
 * Design rules (per the brand rollout plan):
 *  - Characters must render at ≥ 280px wide on mobile OR be hidden entirely — never
 *    shrunk to a thumbnail where they stop reading as characters.
 *  - Text stacks above/below the image on mobile, never wraps tightly.
 *  - Palette stays aligned with existing Hales AC tokens: navy + light-blue surfaces
 *    (not gold) to avoid orange-suit / gold-CTA color tension.
 */

/* ---------- Base section wrapper (used for solo Captain sections) ---------- */
.hales-captains-section {
  padding: 56px 0;
  background: linear-gradient(180deg, #edf7fc 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.hales-captains-section + .hales-captains-section {
  padding-top: 24px;
}

.hales-captains-section__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .hales-captains-section {
    padding: 72px 0;
  }
  .hales-captains-section__inner {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 48px;
  }
}

@media (min-width: 1200px) {
  .hales-captains-section__inner {
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 64px;
  }
}

.hales-captains-section--right-away {
  background: linear-gradient(180deg, #edf7fc 0%, #ffffff 100%);
}

.hales-captains-section--coupon {
  background: linear-gradient(180deg, #f2f7fd 0%, #ffffff 100%);
}

/* ---------- Image wrapper ---------- */
.hales-captains-section__image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 280px;
}

.hales-captains-section__image .hales-captain,
.hales-captains-section__image picture {
  display: inline-block;
  max-width: 100%;
}

.hales-captains-section__image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Mobile: enforce the 280px minimum width so the character reads as a character,
     and cap the height so the text and CTAs stay near the fold. */
  min-width: 280px;
  max-height: 340px;
  filter: drop-shadow(0 10px 24px rgba(1, 22, 53, 0.18));
}

@media (min-width: 768px) {
  .hales-captains-section__image img {
    min-width: 300px;
    max-height: 480px;
  }
}

@media (min-width: 1200px) {
  .hales-captains-section__image img {
    min-width: 320px;
    max-height: 520px;
  }
}

/* ---------- Text column ---------- */
.hales-captains-section__text {
  text-align: center;
}

@media (min-width: 768px) {
  .hales-captains-section__text {
    text-align: left;
  }
}

.hales-captains-section__eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #042452;
  margin-bottom: 10px;
  padding: 4px 12px;
  background: rgba(4, 36, 82, 0.06);
  border-radius: 100px;
}

.hales-captains-section--coupon .hales-captains-section__eyebrow {
  background: rgba(58, 121, 194, 0.1);
  color: #1f4f8a;
}

.hales-captains-section__headline {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1a1a2e;
  margin: 0 0 16px;
  /* Override default inner-page-unified h2::after gold underline — we don't want it here */
}
.hales-captains-section__headline::after {
  display: none !important;
}

.hales-captains-section__body {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 24px;
  max-width: 580px;
}

@media (min-width: 768px) {
  .hales-captains-section__text {
    margin-left: 0;
  }
}

/* ---------- CTAs ---------- */
.hales-captains-section__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (min-width: 768px) {
  .hales-captains-section__ctas {
    justify-content: flex-start;
  }
}

.hales-captains-section__ctas .btn {
  min-height: 48px;
}

/* ---------- "Meet the Heroes" (About → Our Story) ---------- */
.hales-captains-heroes {
  padding: 72px 0 80px;
  background: linear-gradient(180deg, #ffffff 0%, #edf7fc 100%);
  position: relative;
}

.hales-captains-heroes__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.hales-captains-heroes__intro h2 {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  color: #1a1a2e;
  margin: 12px 0 16px;
}
.hales-captains-heroes__intro h2::after { display: none !important; }

.hales-captains-heroes__intro p {
  font-size: 17px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 24px;
}

.hales-captains-heroes__duo-image {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  filter: drop-shadow(0 12px 30px rgba(1, 22, 53, 0.18));
}

.hales-captains-heroes__duo-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
}

/* Heroes grid */
.hales-captains-heroes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .hales-captains-heroes__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.hales-captains-hero {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(1, 22, 53, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 480px) {
  .hales-captains-hero {
    flex-direction: row;
    text-align: left;
    gap: 24px;
    align-items: center;
  }
}

.hales-captains-hero__image {
  flex: 0 0 auto;
  width: 220px;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 6px 16px rgba(1, 22, 53, 0.14));
}

.hales-captains-hero__image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Fill the container height so George (tall) and Jeremy (square) visually
     match — they have very different intrinsic aspect ratios. */
  max-height: 260px;
}

@media (min-width: 768px) {
  .hales-captains-hero__image {
    width: 240px;
    height: 300px;
  }
  .hales-captains-hero__image img {
    max-height: 300px;
  }
}

@media (min-width: 1200px) {
  .hales-captains-hero__image {
    width: 260px;
    height: 320px;
  }
  .hales-captains-hero__image img {
    max-height: 320px;
  }
}

.hales-captains-hero__text {
  flex: 1 1 auto;
  min-width: 0;
}

.hales-captains-hero__text h3 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  margin: 0 0 4px;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}
.hales-captains-hero__text h3::after { display: none !important; }

.hales-captains-hero__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1f4f8a;
  margin: 0 0 12px;
}

.hales-captains-hero__text p {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 10px;
}

.hales-captains-heroes__tagline {
  text-align: center;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 700;
  color: #042452;
  margin: 48px auto 0;
  max-width: 720px;
  padding: 20px 24px;
  border-top: 2px solid rgba(4, 36, 82, 0.12);
  font-style: italic;
  line-height: 1.4;
}

/* ---------- Footer tagline (renders via hales_before_footer action, so it's
   above the <footer> on the dark pre-footer band) ----------
   HAC-013: the tagline sat as a pale pill sandwiched between dark bands on
   the homepage (Comfort Club CTA above, SEO link grid below) — it read as
   an orphaned chip. Reshape into a quiet italic signature that blends
   with the surrounding #0B1B3F pre-footer ribbon. */
.hales-captains-footer-tagline {
  text-align: center;
  padding: 18px 24px;
  background: #0B1B3F;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hales-captains-footer-tagline__text {
  display: inline-block;
  font-size: 13px;
  font-style: italic;
  color: rgba(246, 226, 127, 0.78);
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 720px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

@media (min-width: 768px) {
  .hales-captains-footer-tagline {
    padding: 22px 24px;
  }
  .hales-captains-footer-tagline__text {
    font-size: 14px;
  }
}

/* ---------- Homepage overrides: when duo is used in existing floating-cta ----------
   The existing .floating-cta__man CSS positions the <img> absolutely inside
   .floating-cta__wrapper with left:287 / right:-30 for the old 695x529 solo
   character. Wrapping the image in <picture> collapses the wrapper to 0x0 and
   the child <img> then positions relative to .floating-cta__wrapper — but the
   new 1001x761 duo renders its left side directly under the text column.
   Fix: constrain the <picture> wrapper to an explicit absolute slot on the
   right half of the section, reset the child img to flow normally inside it. */
.floating-cta picture.hales-captain,
.floating-cta picture.hales-captain--duo {
  position: absolute !important;
  right: 1% !important;
  bottom: -8% !important;
  top: auto !important;
  left: auto !important;
  width: 52% !important;
  max-width: 660px !important;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 1200px) {
  .floating-cta picture.hales-captain,
  .floating-cta picture.hales-captain--duo {
    width: 50% !important;
    max-width: 680px !important;
  }
}

.floating-cta picture.hales-captain img,
.floating-cta picture.hales-captain--duo img {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* HAC-015: Meet Captain Right Away section now uses the solo right-away
   variant (715x1070, aspect 0.668) instead of the wide duo (1252x770).
   The previous wrapper rules (width:50-52%, max-width:660-680px) were
   sized for the wider duo art; applied to the tall solo they produced
   a ~990px-tall figure that overflowed the section. Narrow the wrapper
   and let the <img> scale to width with object-fit style height capping. */
.floating-cta picture.hales-captain--right-away {
  width: 34% !important;
  max-width: 320px !important;
  right: 3% !important;
  bottom: -4% !important;
}

@media (min-width: 1200px) {
  .floating-cta picture.hales-captain--right-away {
    width: 28% !important;
    max-width: 360px !important;
    right: 4% !important;
    bottom: -5% !important;
  }
}

@media (max-width: 767px) {
  .floating-cta picture.hales-captain--right-away {
    width: 56% !important;
    max-width: 240px !important;
    margin: 0 auto 12px !important;
  }
}

.floating-cta picture.hales-captain--right-away-flying {
  width: 54% !important;
  max-width: 680px !important;
  right: 2% !important;
  bottom: -3% !important;
}

@media (min-width: 1200px) {
  .floating-cta picture.hales-captain--right-away-flying {
    width: 50% !important;
    max-width: 720px !important;
    right: 3% !important;
    bottom: -5% !important;
  }
}

@media (max-width: 767px) {
  .floating-cta picture.hales-captain--right-away-flying {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    margin: 0 auto 16px !important;
  }
}

@media (max-width: 767px) {
  .floating-cta picture.hales-captain,
  .floating-cta picture.hales-captain--duo {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    display: block !important;
  }

  .floating-cta picture.hales-captain--right-away-flying {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
  }
}

/* ---------- Masthead mascot: during 40th anniversary, the hero image already
   has captain imagery baked in, and the 170x129 overlay is too small to read
   as the duo. Hide the mascot overlay while anniversary mode is active. Once
   the anniversary toggle retires, the duo will appear in the regular hero
   position automatically. ---------- */
.masthead--anniversary .masthead__mascot {
  display: none !important;
}

/* ---------- Full-width-cta ("Ready to Schedule Service?" hero CTA) ----------
   HAC-015: the Captain Right Away art was previously anchored left:2%,
   width:22-26%, which crowded the paragraph copy at 1300-1600px viewports
   (the first word of "Whether you need help today..." was obscured). Shrink
   the captain to a safer clamp and push the text copy to its right so the
   two columns never collide. */
.full-width-cta picture.hales-captain {
  position: absolute !important;
  left: clamp(12px, 2.5%, 36px) !important;
  bottom: 0 !important;
  top: auto !important;
  right: auto !important;
  width: clamp(200px, 18%, 320px) !important;
  max-width: none !important;
  z-index: 3 !important;
  pointer-events: none;
}

.full-width-cta picture.hales-captain img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

@media (max-width: 767px) {
  .full-width-cta picture.hales-captain {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 70% !important;
    max-width: 300px !important;
    margin: 0 auto 16px !important;
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .full-width-cta picture.hales-captain {
    left: clamp(16px, 3%, 48px) !important;
    width: clamp(220px, 20%, 360px) !important;
  }
}

/* ---------- Captain Coupon accent on existing promo-cta block ---------- */
.promo-cta .hales-captain--coupon {
  position: absolute;
  right: 2%;
  bottom: 0;
  max-width: 220px;
  z-index: 2;
}

.promo-cta .hales-captain--coupon img {
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(1, 22, 53, 0.22));
}

@media (max-width: 767px) {
  .promo-cta .hales-captain--coupon {
    position: static;
    margin: 0 auto 24px;
    display: flex;
    justify-content: center;
    max-width: none;
  }
  .promo-cta .hales-captain--coupon img {
    max-width: 280px;
  }
}

/* ---------- Promotions page hero: add captain on the right side ---------- */
.promos-hero {
  position: relative;
}

.promos-hero .hales-captain--coupon {
  display: none;
}

@media (min-width: 992px) {
  .promos-hero .hales-captain--coupon {
    display: block;
    position: absolute;
    right: 4%;
    bottom: 0;
    max-width: 320px;
    pointer-events: none;
  }
  .promos-hero .hales-captain--coupon img {
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.28));
  }
}

/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hales-captains-section,
  .hales-captains-heroes {
    transition: none;
  }
}