/* ===== Kids Care: wood smoke cards ===== */

.kc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 8px 0 40px;
}

.kc-card {
  --kc-btn: #163359;               /* overridden per card below */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 24px;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(22, 51, 89, 0.15);
}

/* Palette: 15% tint backgrounds, solid buttons */
.kc-card--burn      { background: rgba(152, 27, 30, 0.15);  --kc-btn: #981b1e; }  /* #981b1e */
.kc-card--changeout { background: rgba(17, 89, 168, 0.15);  --kc-btn: #1159a8; }  /* #1159a8 */
.kc-card--health    { background: rgba(139, 197, 63, 0.15); --kc-btn: #009a65; }  /* #8bc53f bg, #009a65 button */

.kc-card .kc-card__title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #3a3a44;
}

.kc-card .kc-card__logo {
  display: block;
  height: 58px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 14px;
}

.kc-card .kc-card__text {
  flex-grow: 1;                    /* pushes buttons to the same baseline */
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.45;
  color: #2b2b33;
}

.kc-card .kc-card__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  background: var(--kc-btn);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  border-bottom: none !important;  /* cancels the site's underline-style link border */
  transition: filter 0.15s ease, transform 0.15s ease;
}

.kc-card .kc-card__btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.kc-card .kc-card__btn:focus-visible {
  outline: 3px solid #009bdb;
  outline-offset: 3px;
}

/* Stack on tablets and phones */
@media (max-width: 900px) {
  .kc-cards { grid-template-columns: 1fr; }
}

/* Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .kc-card,
  .kc-card .kc-card__btn { transition: none; }
  .kc-card:hover,
  .kc-card .kc-card__btn:hover { transform: none; }
}

/* ===== Kids Care: "Know Before You Go" app banner ===== */

.kc-app-banner {
  display: flex;
  align-items: flex-end;            /* phone and kids sit on the banner's bottom edge */
  justify-content: space-between;
  gap: 20px;
  background: #bae5fa;
  padding: 0 94px;                  /* 40px of inner space + the 54px the banner bleeds out on each side */
  min-height: 170px;
  margin: 40px -54px -42px;         /* 40px above for the pop-outs; same side/bottom bleed as the header banner */
}

.kc-app-banner img {
  display: block;
  height: auto;
}

/* App icon: bigger, with a playful sticker-style tilt */
.kc-app-banner__icon {
  align-self: center;
  width: clamp(90px, 10%, 120px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 10px rgba(22, 51, 89, 0.2));
}

/* Phone: a fixed-height "window" that crops the bottom of the image,
   so the phone looks zoomed in and the hand ends at the banner's edge */
.kc-app-banner__phone {
  display: block;
  flex-shrink: 0;
  width: clamp(190px, 23%, 260px);  /* bigger = more zoomed in */
  height: 195px;                    /* = banner height (170) + how far it pokes out (25) */
  margin-top: -25px;                /* how far the phone rises above the banner */
  clip-path: inset(-100px -40px 0 -40px);  /* crops only the bottom; top and sides stay free for the hover lift and shadow */
  border-bottom: none !important;   /* cancels the site's link underline */
  text-decoration: none !important;
}

.kc-app-banner__phone img {
  width: 100%;
  margin-top: 20px;                 /* nudges the phone down inside its window (more = lower) */
  filter: drop-shadow(0 8px 14px rgba(22, 51, 89, 0.25));
  transition: transform 0.25s ease;
  transform-origin: bottom center;
}

.kc-app-banner__phone:hover img {
  transform: translateY(-6px) rotate(-2deg);  /* little "pick me up" lift */
}

.kc-app-banner__cta {
  align-self: center;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 28px 0;
}

.kc-app-banner .kc-app-banner__title {
  margin: 0 0 18px;                 /* breathing room above the button */
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;              /* keeps the heading on one line */
  color: #163359;
}

.kc-app-banner .kc-app-banner__btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 8px;
  background: #009bdb;
  color: #fff !important;
  font-size: 16px;
  white-space: nowrap;              /* keeps the label on one line */
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  border-bottom: none !important;   /* cancels the site's underline-style link border */
  box-shadow: 0 3px 0 #163359;      /* playful "pressable" edge */
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.kc-app-banner .kc-app-banner__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #163359;
}

.kc-app-banner .kc-app-banner__btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #163359;
}

.kc-app-banner .kc-app-banner__btn:focus-visible {
  outline: 3px solid #163359;
  outline-offset: 4px;
}

.kc-app-banner__kids {
  display: block;
  flex-shrink: 0;
  width: clamp(170px, 22%, 250px);
  margin-top: -36px;                /* kids roll in just above the banner */
  margin-bottom: 10px;              /* wheels sit just above the bottom edge */
  border-bottom: none !important;   /* cancels the site's link underline */
  text-decoration: none !important;
}

/* Hide the site's automatic external-link arrow on the image links */
.kc-app-banner__phone::before,
.kc-app-banner__phone::after,
.kc-app-banner__kids::before,
.kc-app-banner__kids::after {
  content: none !important;
  display: none !important;
}

.kc-app-banner__kids img {
  width: 100%;
  transition: transform 0.25s ease;
  transform-origin: bottom left;    /* tips back on the rear wheels */
}

.kc-app-banner__kids:hover img {
  transform: translateY(-6px) rotate(-2deg);  /* same lift and tilt as the phone, like a little wheelie */
}

/* Tablets: drop the phone so the text keeps its room */
@media (max-width: 900px) {
  .kc-app-banner { padding: 0 78px; margin-top: 32px; min-height: 160px; }
  .kc-app-banner__phone { display: none !important; }  /* !important beats the site's external-link styles */
  .kc-app-banner .kc-app-banner__title { font-size: 28px; }
}

/* Phones: phone on the left poking up, text on the right; icon and kids hidden */
@media (max-width: 600px) {
  .kc-app-banner {
    flex-direction: row;
    align-items: flex-end;            /* phone sits on the bottom edge */
    gap: 10px;
    padding: 0 16px;                  /* inner space on each side */
    min-height: 0;
    margin-top: 52px;                 /* room for the phone to poke out the top */
    margin-bottom: -20px;             /* smaller pull than desktop's -42px so it doesn't overlap the gray block (closer to 0 = less overlap) */
    margin-left: calc(50% - 50vw);    /* edge to edge at exactly the screen width, so nothing hangs off the sides */
    margin-right: calc(50% - 50vw);
  }

  /* Tighter gap between the green card and the app banner */
  .kc-cards { margin-bottom: 16px; }

  .kc-app-banner__icon,
  .kc-app-banner__kids { display: none !important; }

  /* Phone "window": zoomed in on the phone, hand just peeks in from the bottom-left */
  .kc-app-banner__phone {
    display: block !important;        /* re-show it (the tablet rule hides it) */
    width: 34%;
    max-width: 140px;
    height: 170px;                    /* banner height + how far it pokes out */
    margin-top: -44px;                /* how far the phone rises above the banner */
    clip-path: none;
    overflow: hidden;                 /* crops the zoomed image to the window (clip-path only hid it, it still made the page wider) */
  }

  .kc-app-banner__phone img {
    width: 150%;                      /* zoom: bigger = more zoomed in on the phone */
    max-width: none;
    margin-top: 0;                    /* more = phone sits lower in its window */
    margin-left: -42%;                /* slides the image left so the phone fills the window and the hand exits off the left */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);  /* soft fade instead of a hard cut on the left */
            mask-image: linear-gradient(to right, transparent 0, #000 30%);
  }

  .kc-app-banner__cta {
    text-align: left;
    padding: 20px 0 22px;
  }

  .kc-app-banner .kc-app-banner__title {
    font-size: clamp(17px, 5vw, 22px);  /* scales with the screen so it stays on one line */
    margin-bottom: 12px;
    white-space: nowrap;              /* keeps "Know Before You Go." on one line */
  }

  .kc-app-banner .kc-app-banner__btn {
    padding: 8px 10px;
    font-size: clamp(12px, 3.4vw, 14px);
    white-space: nowrap;              /* keeps the label and arrow together */
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-app-banner .kc-app-banner__btn,
  .kc-app-banner__phone img,
  .kc-app-banner__kids img { transition: none; }
  .kc-app-banner__phone:hover img,
  .kc-app-banner__kids:hover img,
  .kc-app-banner .kc-app-banner__btn:hover,
  .kc-app-banner .kc-app-banner__btn:active { transform: none; }
}

/* ===== Kids Care: header banner, mobile stacking ===== */
/* The banner HTML uses inline styles, so these rules need !important to win.
   Desktop is untouched: .kc-hero is display: contents (inline) above 767px. */

@media (max-width: 767px) {
  .kc-banner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    background: none !important;      /* photo moves to .kc-hero below */
    min-height: 0 !important;
    padding: 0 !important;
    margin: -42px 0 -30px !important;     /* bottom pulls the heading up (more negative = tighter) */
    margin-left: calc(50% - 50vw) !important;   /* edge to edge at exactly the screen width; the old -54px was wider than the phone's gutter */
    margin-right: calc(50% - 50vw) !important;
  }

  /* Safety net: nothing on this page can make it pan sideways */
  html, body { overflow-x: clip; }

  /* Photo block: the girl plus the sticker logo */
  .kc-hero {
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 4 / 5;               /* taller = more of her; 1 / 1 for a shorter hero */
    padding: 0 20px 20px;
    box-sizing: border-box;
    background: url('/media/caalgbsz/header.jpeg') 52% bottom / cover no-repeat;  /* 52% = horizontal focus */
  }

  .kc-logo {
    width: 85% !important;
    max-width: 340px;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: auto !important;
  }

  /* Art card: its own row under the photo, capped and centered */
  .kc-gallery {
    align-self: center !important;
    width: calc(100% - 40px) !important;  /* keeps 20px side space on very small phones */
    max-width: 320px;                     /* smaller = more compact card */
    min-width: 0 !important;
    margin: 20px auto 0 !important;
  }

  /* "This winter, be part of the solution." heading: the heading right before the cards */
  :is(h1, h2, h3):has(+ .kc-cards) {
    margin-top: 0 !important;
    margin-bottom: 20px !important;    /* space between heading and the red card */
  }

  .kc-cards {
    margin-top: 0;
  }
}