/* Pagina do Jardim Japones: guia do vizinho com destino claro para a casa em frente.
   Usa as variaveis de style.css (claro/escuro) e cresce para o desktop a partir de 900px. */
.shell--garden { max-width: 1180px; }
.garden-header { display: flex; align-items: center; gap: 16px; padding: 14px 22px; }
.garden-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--on-card); }
.garden-brand img { width: 30px; height: auto; }
.garden-nav { display: none; }
.garden-header .theme-toggle { position: static; flex: none; margin-left: auto; background: var(--card-2); color: var(--on-card); border-color: var(--hairline); }

.garden-intro { display: flex; flex-direction: column; gap: 20px; padding: 4px 22px 28px; }
.garden-hero { margin: 0; }
.garden-hero picture { display: block; overflow: hidden; border-radius: 20px; box-shadow: 0 18px 40px rgba(10,22,34,0.22); }
.garden-hero img { width: 100%; height: clamp(240px, 62vw, 380px); object-fit: cover; object-position: center 60%; }
.garden-credit, .garden-gallery figcaption small, .garden-figure figcaption small { display: block; margin-top: 6px; font-size: 0.72rem; line-height: 1.4; color: var(--on-card-soft); }
.garden-credit a, .garden-gallery figcaption a, .garden-figure figcaption a { color: inherit; text-underline-offset: 2px; }
.garden-copy .eyebrow { margin: 0 0 10px; }
.garden-copy h1 { margin: 0 0 12px; font: 600 clamp(2rem, 7vw, 3.6rem)/1.04 var(--font-display); letter-spacing: -0.025em; color: var(--on-card); text-wrap: balance; }
.garden-lead { margin: 0 0 18px; font-size: 1rem; line-height: 1.6; color: var(--on-card-soft); max-width: 46ch; text-wrap: pretty; }
.garden-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.garden-facts li { padding: 12px 10px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--hairline); text-align: center; }
.garden-facts strong { display: block; font: 600 1.15rem/1.15 var(--font-display); color: var(--on-card); }
.garden-facts span { display: block; margin-top: 3px; font-size: 0.74rem; color: var(--on-card-soft); }

/* Chamada para a casa em frente, ja na primeira dobra. */
.garden-teaser { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #0f1f2e 0%, #1a3346 100%); box-shadow: 0 12px 26px rgba(18,41,61,0.28); }
.garden-teaser picture { flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: 12px; }
.garden-teaser img { width: 100%; height: 100%; object-fit: cover; }
.garden-teaser__text { flex: 1; min-width: 0; }
.garden-teaser__kicker { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd9a0; }
.garden-teaser strong { display: block; margin-top: 3px; font: 600 1.15rem/1.15 var(--font-display); }
.garden-teaser__sub { display: block; margin-top: 4px; font-size: 0.82rem; line-height: 1.4; color: rgba(255,255,255,0.86); }
.garden-teaser__go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ffd9a0; color: #0f1f2e; }
.garden-teaser__go svg { width: 18px; height: 18px; }
.garden-teaser:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }

.garden-sec { padding: 28px 22px; border-top: 1px solid var(--hairline); }
.garden-sec h2, .garden-band h2 { margin: 0 0 12px; font: 600 1.6rem/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--on-card); text-wrap: balance; }
.garden-sec h3 { margin: 18px 0 6px; font: 600 1.05rem/1.3 var(--font-display); color: var(--on-card); }
.garden-sec p, .garden-sec li { font-size: 0.95rem; line-height: 1.6; color: var(--on-card-soft); text-wrap: pretty; }
.garden-sec p { margin: 0 0 12px; }
.garden-sec ul { margin: 0 0 12px; padding-left: 20px; }
.garden-sec li { margin-bottom: 7px; }
.garden-sec a:not(.btn) { color: var(--on-card); text-underline-offset: 2px; }
.garden-head p { max-width: 62ch; }

.garden-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 10px; }
.garden-gallery:focus-visible { outline: 3px solid var(--sea); outline-offset: 4px; border-radius: 14px; }
.garden-gallery figure { margin: 0; min-width: 0; scroll-snap-align: start; }
.garden-gallery picture { display: block; height: clamp(230px, 70vw, 320px); overflow: hidden; border-radius: 16px; }
.garden-gallery img { width: 100%; height: 100%; object-fit: cover; }
.garden-gallery figcaption { margin-top: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--on-card); }

/* Faixa de destaque da casa em frente. Cores fixas: legivel nos dois temas. */
.garden-band { display: grid; gap: 22px; margin: 8px 14px 28px; padding: 28px 20px; border: 1px solid rgba(240,230,205,0.12); border-radius: 24px; color: #f0e6cd; background: radial-gradient(circle at 90% 10%, rgba(255,217,160,0.22), transparent 40%), linear-gradient(160deg, #0f1f2e 0%, #18344a 100%); box-shadow: 0 20px 50px rgba(10,22,34,0.28); }
.garden-band .eyebrow { margin: 0 0 10px; color: #ffd9a0; }
.garden-band h2 { color: #fff; font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
.garden-band p { margin: 0 0 14px; font-size: 0.96rem; line-height: 1.6; color: rgba(240,230,205,0.88); }
.garden-band a:not(.btn) { color: #fff; text-underline-offset: 2px; }
.garden-band__list { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.garden-band__list li { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(240,230,205,0.14); font-size: 0.92rem; line-height: 1.45; color: rgba(240,230,205,0.92); }
.garden-band__list strong { color: #fff; }
.garden-band__actions { display: grid; gap: 10px; }
.garden-band .btn--ghost { color: #fff; border-color: rgba(240,230,205,0.4); }
.garden-band .btn--ghost:hover { border-color: #fff; }
.garden-band__note { margin: 12px 0 0 !important; font-size: 0.82rem !important; }
.garden-band__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.garden-band__photos figure { margin: 0; }
.garden-band__photos picture { display: block; overflow: hidden; border-radius: 14px; }
.garden-band__photos img { width: 100%; height: 100%; object-fit: cover; }
.garden-band__photos figure:first-child { grid-column: 1 / -1; }
.garden-band__photos figure:first-child picture { height: clamp(200px, 56vw, 300px); }
.garden-band__photos figure:not(:first-child) picture { height: clamp(150px, 40vw, 220px); }
.garden-band .btn:focus-visible { outline: 3px solid #ffd9a0; outline-offset: 3px; }

.garden-split > div + div { margin-top: 28px; }
.garden-figure { margin: 0 0 16px; }
.garden-figure picture { display: block; overflow: hidden; border-radius: 16px; }
.garden-figure img { width: 100%; height: clamp(200px, 56vw, 320px); object-fit: cover; object-position: center 88%; }
.garden-cards { display: grid; gap: 12px; margin-top: 14px; }
.garden-cards article { padding: 18px 18px 8px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--hairline); }
.garden-cards h3 { margin-top: 0; }
.garden-cards strong { color: var(--on-card); }
.garden-sources p { font-size: 0.84rem; }

/* Barra fixa no celular: o destino continua a um toque durante a leitura. */
.garden-sticky { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); }
.garden-sticky span { font-size: 0.84rem; line-height: 1.3; color: var(--on-card-soft); }
.garden-sticky strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--on-card); }
.garden-sticky .btn { width: auto; flex: none; padding: 12px 18px; font-size: 0.92rem; }

@media (min-width: 600px) {
  .garden-gallery { grid-auto-columns: 46%; }
  .garden-band__actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .garden-band__actions .btn { width: auto; padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 900px) {
  .shell--garden { margin: 24px auto; border-radius: 28px; overflow: clip; }
  .garden-header { padding: 20px 40px; gap: 28px; }
  .garden-nav { display: flex; gap: 24px; margin-left: auto; }
  .garden-nav a { font-size: 0.92rem; font-weight: 500; color: var(--on-card-soft); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
  .garden-nav a:hover, .garden-nav a:focus-visible { color: var(--on-card); border-bottom-color: var(--coral); }
  .garden-header .theme-toggle { margin-left: 0; }
  .garden-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 8px 40px 48px; }
  .garden-hero { grid-column: 2; grid-row: 1; }
  .garden-hero img { height: 540px; }
  .garden-copy { grid-column: 1; grid-row: 1; }
  .garden-lead { font-size: 1.1rem; }
  .garden-facts strong { font-size: 1.4rem; }
  .garden-teaser { padding: 14px; }
  .garden-teaser picture { width: 96px; height: 96px; }
  .garden-sec { padding: 56px 40px; }
  .garden-sec h2 { font-size: 2.1rem; }
  .garden-sec p, .garden-sec li { font-size: 1rem; }
  .garden-gallery { grid-auto-flow: row; grid-template-columns: 1.25fr 1fr 0.8fr; grid-auto-columns: auto; overflow: visible; gap: 18px; padding-bottom: 0; }
  .garden-gallery picture { height: 420px; }
  .garden-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; margin: 8px 40px 56px; padding: 52px 52px; }
  .garden-band__photos figure:first-child picture { height: 300px; }
  .garden-band__photos figure:not(:first-child) picture { height: 200px; }
  .garden-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .garden-split > div + div { margin-top: 0; }
  .garden-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .garden-sources { padding-top: 36px; padding-bottom: 36px; }
  .garden-sticky { display: none; }
  .shell--garden .links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; padding: 24px 40px; }
  .shell--garden .links__label { grid-column: 1 / -1; }
  .shell--garden .foot { padding-left: 40px; padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) { .garden-gallery { scroll-behavior: auto; } }