/* Care For Three — base + responsive layer.
   Layout styles live inline in each page (from the approved design);
   this file sets globals and adapts the layout for tablets and phones. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #2B2522; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }

/* Lobster headlines (H1/H2), footer line */
h1, h2:not(#about-title) { font-family: 'Lobster', cursive !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.08 !important; }
h1 { line-height: 0.92 !important; }
footer p[style*="clamp(52px"] { font-family: 'Lobster', cursive !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1 !important; }
p { text-wrap: pretty; }
a { color: #2B2522; }
a:hover { color: #000000; }
a[download], a[href^="https://ig.me"], header nav a:last-child { transition: transform .15s ease, box-shadow .15s ease; }
a:focus-visible { outline: 3px solid #C23B2E; outline-offset: 3px; border-radius: 6px; }

/* Our Story hero photo always fills the hero, at any width */
.page-ourstory #top > img { min-height: calc(100% + 110px); object-fit: cover; object-position: 88% 100%; }

/* ---------- Tablet (≤ 900px) ---------- */
@media (max-width: 900px) {
  [style*="padding: 128px 40px"] { padding: 96px 32px !important; }
  [style*="padding: 0 40px 128px"] { padding: 0 32px 96px !important; }
  [style*="padding: 128px 40px;"][style*="max-width"] { padding: 96px 32px !important; }
  [style*="padding: 88px 40px 40px"] { padding: 72px 32px 32px !important; }
  [style*="padding: 72px 40px; display: flex"] { padding: 56px 32px !important; }
}

/* ---------- Phone (≤ 640px) ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }

  /* Header: logo + "Get the heart" only */
  header { padding: 16px 20px !important; }
  header nav { gap: 0 !important; }
  header nav a:not(:last-child) { display: none; }
  header nav a:last-child { padding: 10px 18px !important; font-size: 15px; }
  header img { height: 34px !important; }

  /* Section rhythm */
  [style*="padding: 128px 40px"], [style*="padding: 96px 32px"] { padding: 64px 20px !important; }
  [style*="padding: 0 40px 128px"] { padding: 0 20px 64px !important; }
  [style*="padding: 0 40px;"] { padding: 0 20px !important; }
  [style*="padding: 88px 40px 40px"] { padding: 56px 20px 28px !important; }
  [style*="padding: 72px 40px; display: flex"] { padding: 48px 20px !important; gap: 10px 22px !important; }
  [style*="padding: 56px 40px 0"] { padding: 40px 20px 0 !important; gap: 8px 20px !important; }
  [style*="padding: 56px 40px 0"] span:not(:first-child),
  [style*="padding: 72px 40px; display: flex"] span:not(:first-child) { font-size: 17px !important; }

  /* Big gaps tighten up */
  [style*="gap: 48px 80px"], [style*="gap: 48px 96px"], [style*="gap: 48px 72px"], [style*="gap: 40px 64px"], [style*="gap: 48px 64px"] { gap: 36px !important; }
  [style*="gap: 52px"] { gap: 36px !important; }

  /* Cards and panels */
  [style*="padding: 40px 48px"] { padding: 24px !important; }
  [style*="border-radius: 40px"] { border-radius: 28px !important; }
  [style*="border-radius: 36px"] { border-radius: 24px !important; }
  [style*="border-radius: 32px"] { border-radius: 22px !important; }
  li[style*="padding: 36px"], div[style*="padding: 36px"] { padding: 26px !important; }

  /* Home hero */
  .page-main #top { min-height: 680px !important; }
  .page-main #top > div[style*="padding: 72px 40px 152px"] { padding: 32px 20px 120px !important; gap: 22px !important; }
  .page-main #top h1 { font-size: 52px !important; }

  /* "What it is" card under the hero */
  #about { margin-top: -48px !important; }
  #about > div > div[style*="flex: 1 1 560px"] { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  #about h2 { font-size: 24px !important; }

  /* Everyday band: stack text over a stronger fade */
  [aria-labelledby="everyday-title"] > div { height: 520px !important; }
  [aria-labelledby="everyday-title"] > div > div[style*="linear-gradient(90deg"] { background: linear-gradient(180deg, rgba(25,22,22,0.62) 0%, rgba(25,22,22,0.35) 55%, rgba(25,22,22,0.1) 100%) !important; }
  [aria-labelledby="everyday-title"] > div > div[style*="justify-content: center"] { left: 22px !important; right: 22px !important; justify-content: flex-start !important; padding-top: 36px; }
  [aria-labelledby="everyday-title"] img { object-position: 72% 60% !important; }

  /* Ripple chart labels */
  [role="img"] span[style*="width: 78px"] { width: 58px !important; font-size: 12px !important; }
  [role="img"] span[style*="width: 56px"] { width: 44px !important; font-size: 19px !important; }

  /* Found-in and gallery grids */
  [style*="minmax(170px, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  #share [style*="repeat(3, 1fr)"] { gap: 8px !important; }

  /* Footer */
  footer [style*="gap: 28px"] > svg { width: 96px !important; height: 92px !important; }
  footer nav { gap: 2px 18px !important; }

  /* Make a Note hero: text on top, heart in view below */
  .page-makeanote #top { min-height: 760px !important; }
  .page-makeanote #top > img { top: auto !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 50% !important; object-position: 60% 42% !important; }
  .page-makeanote #top > div[style*="linear-gradient(90deg"] { background: linear-gradient(180deg, #F4F4F2 0%, #F4F4F2 50%, rgba(244,244,242,0.6) 58%, rgba(244,244,242,0) 68%) !important; }
  .page-makeanote #top > div[style*="padding: 24px 40px 96px"] { padding: 16px 20px 280px !important; align-items: flex-start !important; }
  .page-makeanote #top h1 { font-size: 48px !important; }

  /* Our Story hero: photo fills the frame */
  .page-ourstory #top > img { top: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 70% 50%; }
  .page-ourstory #top > div[style*="padding: 56px 40px 360px"] { padding: 40px 20px 300px !important; }
  .page-ourstory #top h1 { font-size: 48px !important; }

  /* "You are so brave. / You are so strong." fits a phone */
  h2[style*="font-size: 58px"] { font-size: 38px !important; }

  /* Video thumbnails */
  a[aria-label="Watch Lee's story"] img { aspect-ratio: 4 / 3 !important; }
}