/* You Got the Bag (Care & Ownership). The new-bag watercolor on top, then four cards.
   Each card shows its watercolor whole (3:2, as drawn) with a small text on the empty
   paper at left; the whole card is a button that opens its full guide in a full-screen
   panel. The gold dot and the panel come from start-map.css, as on Start Here. */

/* ---- Hero ---- */
.care-hero { display:grid; grid-template-areas:"text" "art" "intro"; justify-items:center; width:min(1080px, 100%); margin:0 auto; padding:36px 16px 0; text-align:center; }
.care-hero-text { grid-area:text; }
.care-eyebrow { margin:0; font:700 12px/1.3 'Manrope',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#806038; }
.care-h1 { margin:12px 0 0; font:500 clamp(42px, 11vw, 68px)/1.04 'Cormorant Garamond',Georgia,serif; letter-spacing:-.03em; color:#32271f; }
.care-h1 em { display:block; margin-top:.3em; font-size:.62em; font-style:italic; font-weight:400; line-height:1.15; letter-spacing:-.015em; color:#806038; text-wrap:balance; }
.care-hero-art { grid-area:art; display:block; width:min(100%, 560px); height:auto; margin:20px 0 0; }
.care-intro { grid-area:intro; max-width:560px; margin:16px 0 0; font:400 17px/1.7 'Manrope',sans-serif; color:#695a4c; }

/* ---- The four cards ---- */
.care-cards { width:min(1080px, 100%); margin:0 auto; padding:30px 16px 0; }
.care-hint { max-width:560px; margin:0 auto 16px; text-align:center; font:400 15px/1.5 'Manrope',sans-serif; color:#695a4c; text-wrap:balance; }
.care-grid { display:grid; gap:16px; }

.care-card { display:block; width:100%; margin:0; padding:0; border:0; border-radius:20px; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.care-frame { position:relative; display:block; overflow:hidden; border-radius:20px; background:#faf1e7; box-shadow:0 0 0 1px #eadfcd, 0 10px 28px rgba(98,69,40,.08); container-type:inline-size; }
.care-card-art { display:block; width:100%; height:auto; }

/* The mini text sits on the blank paper: the upper left of every watercolor is empty */
.care-mini { position:absolute; left:5.5cqw; top:5.4cqw; width:44cqw; display:flex; flex-direction:column; gap:1.5cqw; text-shadow:0 0 10px #faf1e7, 0 0 3px #faf1e7; }
.care-card-eyebrow { font:700 clamp(11px, 2.9cqw, 12.5px)/1.2 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#806038; }
.care-card-title { font:500 clamp(21px, 5.9cqw, 31px)/1.05 'Cormorant Garamond',Georgia,serif; letter-spacing:-.01em; color:#32271f; text-wrap:balance; }
.care-card-line { max-width:36cqw; font:500 clamp(14px, 3.75cqw, 16px)/1.4 'Manrope',sans-serif; color:#54473b; }
/* The smallest phones: a touch smaller, so the text stays on the paper */
@container (max-width:330px) {
  .care-card-title { font-size:19px; }
  .care-card-line { max-width:40cqw; font-size:13px; }
}

/* The Start Here dot, bottom left of the paper: 26 px drawn, 44 px to tap (the whole card taps too) */
.care-card-dot { position:absolute; left:calc(5.5cqw - 9px); bottom:calc(5.5cqw - 9px); width:44px; height:44px; }
.care-card-dot .jm-dot { position:absolute; left:9px; top:9px; }

/* Keyboard focus: the site-wide outline (cream.css) follows the rounded card and the round buttons */
.care-page .jm-x { border-radius:50%; }
.care-page .jm-x:focus-visible { outline-offset:-2px; }
/* Without JavaScript the close buttons stay hidden (.jm-x sets its own display) */
.care-page .jm-x[hidden] { display:none; }
.care-cards:not(.is-ready) .care-card { cursor:default; }
.care-cards:not(.is-ready) .care-card-dot { visibility:hidden; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .care-cards.is-ready .care-frame { transition:transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms ease; }
  .care-cards.is-ready .care-card:hover .care-frame { transform:translateY(-4px); box-shadow:0 0 0 1px #dfcfb6, 0 22px 50px rgba(98,69,40,.15), 0 6px 14px rgba(98,69,40,.07); }
}

/* ---- The four panels ----
   Without JavaScript they read one after another under the cards. With it, each one is a
   full-screen dialog; its bar stays at the top while the long text scrolls. */
.care-answers { margin-top:48px; }
.care-answers.is-ready { margin-top:0; }
.care-panel .jm-sheet > :not(.jm-bar) { align-self:stretch; }
.care-answers.is-ready .care-panel .jm-bar { position:sticky; top:-14px; z-index:2; margin:-14px -22px 0; padding:14px 12px 0 22px; background:rgba(250,248,244,.97); }
.care-answers.is-ready .care-panel .jm-bar::after { content:''; position:absolute; left:0; right:0; top:100%; height:16px; background:linear-gradient(rgba(250,248,244,.97), rgba(250,248,244,0)); pointer-events:none; }

.care-panel-title { margin:22px 0 14px; font:500 34px/1.06 'Cormorant Garamond',Georgia,serif; letter-spacing:-.02em; color:#32271f; text-wrap:balance; }
.care-panel-intro { margin:0 0 22px; font:italic 400 20px/1.45 'Cormorant Garamond',Georgia,serif; color:#6b5a48; }
.care-panel-answer { margin:0 0 30px; padding:18px 20px; border-radius:16px; background:#f4eadb; border:1px solid #e4dcd0; }
.care-panel-label { margin:0 0 8px; font:700 12px/1.2 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#806038; }
.care-panel-answer p:last-child { margin:0; font:400 17px/1.65 'Manrope',sans-serif; color:#32271f; }
.care-panel-body h3 { margin:34px 0 10px; font:500 26px/1.15 'Cormorant Garamond',Georgia,serif; letter-spacing:-.01em; color:#32271f; text-wrap:balance; }
.care-panel-body h3:first-child { margin-top:0; }
.care-panel-body p, .care-panel-body li { font:400 17px/1.68 'Manrope',sans-serif; color:#5a4b3e; }
.care-panel-body p { margin:0 0 14px; }
.care-panel-body ul { margin:0 0 16px; padding-left:1.2em; list-style:disc; }
.care-panel-body li { margin:0 0 10px; padding-left:.2em; }
.care-panel-body li::marker { color:#b99a6b; }
.care-panel-body strong { font-weight:600; color:#32271f; }
.care-panel-body a { color:#32271f; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c9ad7f; }
.care-panel-page { margin:24px 0 0; padding-top:14px; border-top:1px solid #e4dcd0; font:400 15px/1.5 'Manrope',sans-serif; }
.care-panel-page a { display:inline-flex; align-items:center; min-height:44px; color:#695a4c; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#c9ad7f; }

/* ---- Closing lines ---- */
.care-boundary { width:min(640px, calc(100% - 32px)); margin:48px auto 0; padding:22px 8px; text-align:center; font:500 16px/1.7 'Manrope',sans-serif; color:#32271f; border-top:1px solid #e4dcd0; border-bottom:1px solid #e4dcd0; }
.care-back { max-width:720px; margin:24px auto 0; padding:0 24px; text-align:center; font:400 16px/1.7 'Manrope',sans-serif; color:#695a4c; }
.care-back a { color:#32271f; text-decoration:underline; text-underline-offset:4px; }
.care-disclaimer { max-width:720px; margin:40px auto 88px; padding:24px 24px 0; text-align:center; }

/* ---- Larger screens: text beside the photo, cards two by two ---- */
@media (min-width:768px) {
  .care-cards { padding:40px 32px 0; }
  .care-grid { grid-template-columns:1fr 1fr; gap:22px; }
}
@media (min-width:900px) {
  .care-hero { grid-template-columns:minmax(0, 1fr) minmax(0, 560px); grid-template-areas:"text art" "intro art"; column-gap:56px; justify-items:start; align-items:center; padding:48px 32px 0; text-align:left; }
  .care-hero-text { align-self:end; }
  .care-intro { align-self:start; margin-top:18px; }
  .care-hero-art { margin:0; }
  .care-panel-title { font-size:40px; }
}

@media (prefers-reduced-motion: reduce) {
  .care-frame { transition:none; }
}
/* The topic name is a gold eyebrow, as on Start Here, so a pop-up never shows two titles */
.care-page .jm-name { margin:0; font:700 11px/1.3 'Manrope',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#806038; }