/* ===== layout.css — header, footer, grids bento ===== */

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 250, 247, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 70px;
}
.brand { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 700; color: var(--green-900); font-size: 1.15rem; letter-spacing: -.02em; }
.brand:hover { color: var(--green-900); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-600); }

.nav__links { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; }
.nav__links a {
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 500; color: var(--green-900);
  padding: .5rem .8rem; border-radius: 999px; transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover { background: var(--green-700); color: #fff; }
.nav__links a.is-active { color: var(--red-600); }

.nav__cta {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  background: var(--red-600); color: #fff !important;
  padding: .55rem 1.1rem !important; border-radius: 999px;
}
.nav__cta:hover { background: var(--red-700) !important; }

.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer; align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--green-900); position: relative; transition: transform .25s var(--ease), opacity .2s;
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- Footer ---- */
.site-footer {
  background: var(--green-900); color: #cfe6da; margin-top: clamp(48px, 6vw, 96px);
}
.site-footer a { color: #cfe6da; }
.site-footer a:hover { color: #fff; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(40px, 5vw, 64px);
}
.footer__brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.footer__brand .brand__mark { width: 34px; height: 34px; }
.footer p { color: #9fc4b2; margin-top: .8rem; max-width: 36ch; }
.footer h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin: .45rem 0; }
.footer__social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; transition: background .2s, transform .2s var(--ease);
}
.footer__social a:hover { background: var(--red-600); transform: translateY(-3px); border-color: transparent; }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .85rem; color: #9fc4b2;
}
.footer__bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---- Bento grids ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.bento > * { min-width: 0; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.row-2 { grid-row: span 2; }

/* generic content grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

/* article layout */
.article-wrap { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.article-aside { position: sticky; top: 90px; }

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .article-wrap { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

@media (max-width: 860px) {
  .nav__links, .nav > .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex; position: absolute; left: 0; right: 0; top: 70px;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem clamp(16px, 4vw, 32px) 1.4rem;
    box-shadow: var(--shadow-md);
  }
  .nav.is-open .nav__links a { padding: .8rem 1rem; }
  .nav.is-open .nav__links li.nav__cta-li { margin-top: .4rem; }
  .col-2, .col-3, .col-4 { grid-column: span 3; }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .col-2, .col-3, .col-4, .col-6 { grid-column: 1 / -1; }
  .row-2 { grid-row: auto; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}