/* ============================================================
   THEME 4: SOLE & LUNA · one house, two skies
   Casolena = Casa del Sole e della Luna.
   Sole (summer): warm paper, lake teal, sun gold.
   Luna (winter): night blue, amber lamplight, ice teal.
   Tokens flip on html[data-season="luna"].
   ============================================================ */
/* The homepage keeps the same vertical rhythm as the rest of the site (see the
   note above .page-hero in pages.css): ~64px between sections here, a little
   more around the quote and the closing call to action, and the whole scale
   stepped down again on phones at the foot of this file.
   This first band is shorter at the top than the bottom on purpose: it follows
   a full-screen photo that already ends in open sky, so the usual band on top
   of that read as a hole rather than as breathing room. */
.c4-intro{padding:56px 0 24px}
.c4-intro-grid{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center}
.c4-intro h2{font-size:clamp(28px,3.4vw,42px)}
.c4-intro .kicker{margin-bottom:16px}
.c4-intro p{margin-top:18px;color:var(--ink-soft)}
.c4-moon-dial{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.c4-moon-dial h3{font-size:18px}
/* .c4-intro p adds 18px on top of the flex gap, which is most of why this card
   used to run so tall next to the copy. The gap alone spaces it. */
.c4-moon-dial p{font-size:15.5px;color:var(--ink-soft);margin-top:0}
/* The switch: a track holding both seasons, with the live one filled. The base
   .season-toggle pill in critical.css is the track, so only the inside changes. */
/* critical.css pushes every .season-toggle right below 1060px, which is what the
   header wants and the card does not. */
.c4-moon-dial .season-switch{gap:3px;padding:3px;margin-top:2px;margin-left:0;margin-right:auto}
.season-switch .ss-opt{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:99px;color:var(--ink-soft);transition:background-color .3s ease,color .3s ease}
.season-switch svg{width:14px;height:14px;fill:currentColor}
html[data-season="sole"] .season-switch [data-opt="sole"],
html[data-season="luna"] .season-switch [data-opt="luna"]{background:var(--accent);color:var(--accent-ink)}
.c4-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:40px}
/* Each season's photo sets its own ratio, so neither is cropped by the browser.
   These must match the files: sole 1200x1600, luna 1200x1667. */
.c4-split img{width:100%;height:auto;object-fit:cover;border-radius:12px}
.c4-split h2{font-size:clamp(26px,3vw,38px)}
.c4-split .kicker{margin-bottom:14px}
.c4-split p{margin-top:16px;color:var(--ink-soft);max-width:48ch}
.c4-great{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:40px}
/* The great room photo swaps with the season (sole: bright day, luna: winter sun).
   Both files are portrait 1200x1600. Columns mirror .c4-split so the two photos
   sit at the same width, text left / photo right alternating with the split above. */
.c4-great img{grid-column:2;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.c4-great>div{grid-column:1;grid-row:1}
.c4-great h2{font-size:clamp(26px,3vw,38px)}
.c4-great .kicker{margin-bottom:14px}
.c4-great p{margin-top:16px;color:var(--ink-soft);max-width:48ch}
.c4-rooms{background:var(--bg-alt);padding:68px 0}
.c4-room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.c4-room{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.c4-room img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.c4-room-body{padding:20px 22px 24px}
.c4-room h3{font-size:21px}
.c4-room em{display:block;font-family:var(--display);font-style:italic;color:var(--kicker-c);font-size:15px;margin-top:4px}
.c4-room p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
.c4-life{padding:68px 0}
.c4-life-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.c4-life figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* Portrait 3:4, the native ratio of the phone these are shot on, so nothing crops. */
.c4-life img{width:100%;aspect-ratio:3/4;object-fit:cover}
.c4-life figcaption{padding:16px 20px;font-size:15px;color:var(--ink-soft)}
.c4-life figcaption strong{color:var(--ink);font-family:var(--display);font-size:17px;display:block;margin-bottom:2px}
.c4-quote{text-align:center;max-width:780px;margin:0 auto;padding:76px 24px}
.c4-quote blockquote{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.5}
.c4-quote cite{display:block;margin-top:18px;font-style:normal;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.c4-quote .badges{justify-content:center}
.c4-rhythm{background:var(--bg-alt);padding:68px 0}
.c4-rhythm-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.c4-rhythm h2{font-size:clamp(26px,3vw,38px)}
.c4-rhythm .kicker{margin-bottom:14px}
.c4-rhythm p{margin-top:16px;color:var(--ink-soft);max-width:50ch}
.c4-cta{text-align:center;padding:84px 24px}
.c4-cta h2{font-size:clamp(28px,3.4vw,44px);max-width:18em;margin:0 auto}
.c4-cta p{margin-top:16px;color:var(--ink-soft)}
.c4-cta .btn{margin-top:32px}
@media (max-width:1000px){
.c4-intro-grid,.c4-rhythm-grid{grid-template-columns:1fr;gap:36px}
.c4-split{grid-template-columns:1fr;gap:28px;padding:34px 28px}
.c4-great{grid-template-columns:1fr;gap:28px;padding:34px 28px}
.c4-great img{grid-column:auto}
.c4-great>div{grid-column:auto;grid-row:auto}
.c4-room-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.c4-life-grid{grid-template-columns:1fr}
}
/* Phones, same step down the rest of the site takes at this width. Once the
   two-column blocks have stacked, the bands between them are the only thing
   left holding the page apart, and at desktop size they push the next section
   most of a screen away. */
@media (max-width:700px){
.c4-intro{padding:40px 0 22px}
.c4-moon-dial{padding:20px 22px}
.c4-split,.c4-great{padding:26px 22px}
.c4-rooms,.c4-life,.c4-rhythm{padding:48px 0}
.c4-room-grid,.c4-life-grid{margin-top:26px}
.c4-quote{padding:52px 22px}
.c4-cta{padding:56px 22px}
}
@media (max-width:620px){
.c4-room-grid{grid-template-columns:1fr}
}