/* ==========================================================
   KERIGOLD-C.CSS  — Direction C shared stylesheet
   Source of truth: homepage-c-mockup.html
   ========================================================== */

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  color:#222;
  background:#fff;
  line-height:1.6;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* =====================================================
   LAYOUT HELPERS
   ===================================================== */
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:768px)  { .container { padding:0 32px; } }
@media (min-width:1200px) { .container { padding:0 40px; } }

/* =====================================================
   TOKENS
   ===================================================== */
:root {
  --gold:    #FFD700;
  --amber:   #c8930a;
  --dark:    #111;
  --mid:     #444;
  --light:   #666;
  --rule:    #e8e8e8;
  --bg-alt:  #fafafa;
  --radius:  8px;
  --shadow:  0 4px 20px rgba(0,0,0,0.08);
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:4px;
  font-family:'Montserrat',sans-serif;
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:background 0.2s, transform 0.1s;
  white-space:nowrap;
  border:none;
}
.btn:active { transform:scale(0.98); }
.btn-gold  { background:var(--gold);  color:var(--dark); }
.btn-gold:hover  { background:#f0c800; }
.btn-dark  { background:var(--dark);  color:var(--gold); }
.btn-dark:hover  { background:#333; }
.btn-outline { background:transparent; color:var(--dark); border:2px solid var(--dark); }
.btn-outline:hover { background:rgba(0,0,0,0.05); }
.btn-full  { width:100%; }

/* =====================================================
   SECTION CHROME
   ===================================================== */
.section { padding:48px 0; }
@media (min-width:768px) { .section { padding:64px 0; } }
@media (min-width:1024px){ .section { padding:80px 0; } }

.section-header { text-align:center; margin-bottom:36px; }
@media (min-width:768px) { .section-header { margin-bottom:48px; } }

.section-label {
  display:block;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:10px;
}
.section-header h2 {
  font-size:1.6rem;
  font-weight:700;
  color:var(--dark);
  letter-spacing:-0.3px;
  margin-bottom:12px;
  line-height:1.2;
}
@media (min-width:768px) { .section-header h2 { font-size:2rem; } }

.section-header p {
  font-size:0.9rem;
  color:var(--light);
  max-width:580px;
  margin:0 auto;
  line-height:1.75;
}

/* =====================================================
   NAV
   ===================================================== */
header {
  position:sticky;
  top:0;
  z-index:200;
  background:#fff;
  border-bottom:3px solid var(--gold);
  box-shadow:0 2px 12px rgba(0,0,0,0.07);
}
.nav-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
}
@media (min-width:768px) { .nav-inner { padding:16px 32px; } }
@media (min-width:1200px){ .nav-inner { padding:18px 40px; max-width:1440px; margin:0 auto; } }

.logo {
  font-size:1rem;
  font-weight:800;
  color:var(--dark);
  letter-spacing:2px;
  text-transform:uppercase;
}
.logo span { color:var(--amber); }

/* mobile: just logo + book button */
.nav-links { display:none; }
.nav-book-mobile {
  background:var(--dark);
  color:var(--gold);
  padding:9px 18px;
  border-radius:4px;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.5px;
}

/* desktop: full nav */
@media (min-width:900px) {
  .nav-book-mobile { display:none; }
  .nav-links {
    display:flex;
    gap:28px;
    align-items:center;
    list-style:none;
  }
  .nav-links a {
    font-size:0.8rem;
    font-weight:500;
    color:var(--mid);
    letter-spacing:0.3px;
    transition:color 0.2s;
  }
  .nav-links a:hover { color:var(--amber); }
  .nav-links .nav-cta {
    background:var(--dark);
    color:var(--gold);
    padding:9px 20px;
    border-radius:4px;
    font-weight:700;
    font-size:0.8rem;
  }
  .nav-links .nav-cta:hover { background:#333; color:var(--gold); }
}

/* =====================================================
   HERO — mobile first: image top, text below
   ===================================================== */
.hero { background:var(--bg-alt); }

.hero-image {
  width:100%;
  overflow:hidden;
}
.hero-image img {
  width:100%;
  height:260px;
  object-fit:cover;
}

.hero-text {
  padding:28px 20px 36px;
}

.hero-eyebrow {
  display:block;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:12px;
}
.hero h1 {
  font-size:2rem;
  font-weight:800;
  color:var(--dark);
  line-height:1.15;
  letter-spacing:-0.5px;
  margin-bottom:14px;
}
.hero h1 em { font-style:normal; color:var(--amber); }

.hero-sub {
  font-size:0.9rem;
  color:var(--light);
  line-height:1.75;
  margin-bottom:24px;
}
.hero-btns {
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* tablet: side by side buttons */
@media (min-width:480px) {
  .hero-btns { flex-direction:row; flex-wrap:wrap; }
  .hero-btns .btn { flex:1; min-width:160px; }
}

/* desktop: 2-column layout, text left / image right */
@media (min-width:900px) {
  .hero {
    padding:64px 0 56px;
  }
  .hero-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    padding:0 40px;
  }
  .hero-image {
    order:2;
    border-radius:10px;
    box-shadow:0 24px 60px rgba(0,0,0,0.13);
  }
  .hero-image img {
    height:420px;
    border-radius:10px;
  }
  .hero-text {
    order:1;
    padding:0;
  }
  .hero h1 { font-size:3rem; letter-spacing:-1.5px; }
  .hero-sub { max-width:400px; font-size:1rem; }
  .hero-btns { flex-direction:row; }
  .hero-btns .btn { flex:none; }
}

/* =====================================================
   SOCIAL PROOF BAR
   ===================================================== */
.sp-bar {
  background:#fff;
  border-bottom:1px solid var(--rule);
  padding:12px 20px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.sp-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:max-content;
}
@media (min-width:768px) {
  .sp-bar { padding:14px 32px; overflow-x:visible; }
  .sp-inner { min-width:unset; gap:20px; }
}
@media (min-width:1024px) {
  .sp-inner { gap:28px; }
}

.sp-label {
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#bbb;
  flex-shrink:0;
}
.sp-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border:1px solid var(--rule);
  border-radius:6px;
  transition:border-color 0.2s;
  flex-shrink:0;
}
.sp-badge:hover { border-color:var(--gold); }
.sp-stars { color:var(--gold); font-size:0.7rem; letter-spacing:1px; }
.sp-score { font-weight:700; color:var(--dark); font-size:0.88rem; }
.sp-name  { font-size:0.73rem; color:var(--mid); font-weight:600; }
.sp-tag   { background:#fffbf0; color:#0066cc; font-size:0.68rem; font-weight:700; padding:2px 6px; border-radius:3px; }
.sp-from  { display:none; }

/* =====================================================
   WHY STAY — icon cards
   ===================================================== */
.why-stay { background:var(--bg-alt); padding-bottom:32px; }

.why-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (min-width:768px)  { .why-grid { gap:20px; } }
@media (min-width:1024px) { .why-grid { grid-template-columns:repeat(4,1fr); gap:24px; } }

.why-card {
  background:#fff;
  border-radius:var(--radius);
  padding:22px 16px;
  border:1px solid var(--rule);
  text-align:center;
}
@media (min-width:768px) { .why-card { padding:28px 24px; } }

.why-icon {
  width:48px; height:48px;
  border-radius:50%;
  background:#fffbf0;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.why-icon i { color:var(--amber); font-size:1.1rem; }
.why-card h3 { font-size:0.88rem; font-weight:700; color:var(--dark); margin-bottom:6px; }
.why-card p  { font-size:0.78rem; color:var(--light); line-height:1.6; }

/* =====================================================
   PHOTO STRIP
   ===================================================== */
.photo-strip { background:var(--bg-alt); padding:0 20px 48px; }
@media (min-width:768px)  { .photo-strip { padding:0 32px 56px; } }
@media (min-width:1200px) { .photo-strip { padding:0 40px 64px; } }

.strip-grid {
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:600px)  { .strip-grid { grid-template-columns:repeat(3,1fr); } }

.strip-item {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  height:200px;
  cursor:pointer;
}
@media (min-width:600px)  { .strip-item { height:240px; } }
@media (min-width:1024px) { .strip-item { height:280px; } }

.strip-item img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.4s;
}
.strip-item:hover img { transform:scale(1.04); }
.strip-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 55%);
  border-radius:var(--radius);
}
.strip-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:18px 20px;
}
.strip-label h3 { color:#fff; font-size:0.92rem; font-weight:700; margin-bottom:3px; }
.strip-label .arrow { color:var(--gold); font-size:0.73rem; font-weight:600; }

/* =====================================================
   ACCOMMODATION CARDS
   ===================================================== */
.accommodation { background:var(--bg-alt); }

.accom-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:640px)  { .accom-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .accom-grid { grid-template-columns:repeat(3,1fr); } }

.accom-card {
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--rule);
  transition:box-shadow 0.25s, transform 0.25s;
}
.accom-card:hover { box-shadow:0 10px 36px rgba(0,0,0,0.09); transform:translateY(-3px); }
.accom-card img { width:100%; height:190px; object-fit:cover; }
.accom-body { padding:20px; }
@media (min-width:768px) { .accom-body { padding:24px; } }
.accom-type { font-size:0.63rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.accom-body h3 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:12px; }
.accom-body ul { list-style:none; margin-bottom:14px; }
.accom-body ul li {
  font-size:0.78rem; color:#555;
  padding:5px 0;
  border-bottom:1px solid #f5f5f5;
  display:flex; align-items:center; gap:8px;
}
.accom-body ul li::before { content:'✓'; color:var(--amber); font-weight:700; flex-shrink:0; }
.accom-perfect { font-size:0.75rem; color:#aaa; margin-bottom:16px; }
.accom-perfect strong { color:#777; }
.btn-accom {
  display:block; text-align:center;
  background:var(--dark); color:var(--gold);
  padding:11px; border-radius:4px;
  font-size:0.8rem; font-weight:700; letter-spacing:0.5px;
  transition:background 0.2s;
}
.btn-accom:hover { background:#333; }

/* =====================================================
   AMENITIES BAR
   ===================================================== */
.amenities-bar { background:var(--dark); padding:22px 20px; }
@media (min-width:768px) { .amenities-bar { padding:24px 32px; } }

.am-inner {
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px 20px;
}
@media (min-width:480px) { .am-inner { grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px) { .am-inner { grid-template-columns:repeat(4,1fr); } }
@media (min-width:1024px){
  .am-inner {
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:12px;
  }
}

.am-item { display:flex; align-items:center; gap:9px; }
.am-item i { color:var(--gold); font-size:0.95rem; flex-shrink:0; }
.am-item span { color:#bbb; font-size:0.76rem; font-weight:500; }

/* =====================================================
   TRAVELLER CARDS
   ===================================================== */
.travellers { background:#fff; }

.traveller-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (min-width:768px)  { .traveller-grid { gap:20px; } }
@media (min-width:1024px) { .traveller-grid { grid-template-columns:repeat(4,1fr); } }

.traveller-card {
  text-align:center;
  padding:22px 16px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:border-color 0.2s, box-shadow 0.2s;
}
@media (min-width:768px) { .traveller-card { padding:28px 20px; } }
.traveller-card:hover { border-color:var(--gold); box-shadow:0 4px 16px rgba(200,147,10,0.1); }
.t-icon {
  width:50px; height:50px;
  border-radius:50%;
  background:#fffbf0;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.t-icon i { color:var(--amber); font-size:1.1rem; }
.traveller-card h3 { font-size:0.88rem; font-weight:700; color:var(--dark); margin-bottom:7px; }
.traveller-card p  { font-size:0.77rem; color:var(--light); line-height:1.6; }

/* =====================================================
   TESTIMONIAL
   ===================================================== */
.testimonial { background:var(--bg-alt); }
.testimonial-inner {
  max-width:680px; margin:0 auto;
  text-align:center;
  padding:0 8px;
}
.t-stars { color:var(--gold); font-size:1rem; letter-spacing:4px; margin-bottom:20px; }
.testimonial blockquote {
  font-size:1rem; color:#333;
  line-height:1.85; font-style:italic;
  margin-bottom:18px;
}
@media (min-width:768px) { .testimonial blockquote { font-size:1.1rem; } }
.testimonial cite { font-size:0.78rem; color:#aaa; font-weight:600; font-style:normal; letter-spacing:0.5px; }

/* =====================================================
   CTA BANNER
   ===================================================== */
.cta-section {
  background:var(--gold);
  padding:48px 20px;
  text-align:center;
}
@media (min-width:768px) { .cta-section { padding:64px 40px; } }
.cta-section h2 {
  font-size:1.7rem; font-weight:800;
  color:var(--dark); margin-bottom:12px;
  letter-spacing:-0.3px; line-height:1.2;
}
@media (min-width:768px) { .cta-section h2 { font-size:2.2rem; } }
.cta-section p { font-size:0.92rem; color:#555; margin-bottom:28px; }
.cta-btns {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
@media (min-width:480px) {
  .cta-btns { flex-direction:row; justify-content:center; }
  .cta-btns .btn { min-width:200px; }
}

/* =====================================================
   FOOTER
   ===================================================== */
footer { background:var(--dark); color:#fff; padding:40px 20px 20px; }
@media (min-width:768px) { footer { padding:56px 40px 28px; } }

.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:32px;
}
@media (min-width:900px) {
  .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
}

.footer-col h4 {
  font-size:0.63rem; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.footer-col p, .footer-col a {
  font-size:0.78rem; color:#777;
  line-height:2.1; display:block;
  transition:color 0.2s;
}
.footer-col a:hover { color:var(--gold); }
.footer-brand {
  font-size:0.95rem; font-weight:800;
  color:#fff; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:10px;
}
.footer-brand span { color:var(--amber); }
.footer-tagline { font-size:0.78rem; color:#555; margin-bottom:14px; line-height:1.6; }

.footer-brand-col { display:none; }
@media (min-width:640px) { .footer-brand-col { display:block; } }

.footer-bottom {
  max-width:1200px; margin:0 auto;
  padding-top:20px;
  border-top:1px solid #222;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:center;
}
@media (min-width:768px) {
  .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; }
}
.footer-bottom p { font-size:0.73rem; color:#444; }
.footer-bottom a { color:#444; transition:color 0.2s; }
.footer-bottom a:hover { color:var(--gold); }

/* =====================================================
   INFO BOX  — amber left-border callout
   ===================================================== */
.info-box {
  border-left:4px solid var(--amber);
  background:#fffbf0;
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
  margin:0 auto;
  max-width:700px;
}
.info-box h3 {
  font-size:0.88rem;
  font-weight:700;
  color:var(--amber);
  margin-bottom:8px;
  letter-spacing:0.5px;
}
.info-box p {
  font-size:0.82rem;
  color:#555;
  line-height:1.7;
  margin-bottom:6px;
}
.info-box p:last-child { margin-bottom:0; }
.info-box strong { color:var(--dark); }

/* =====================================================
   FAQ ACCORDION  — native <details>/<summary>
   ===================================================== */
.faq-group { margin-bottom:36px; }

.faq-group-title {
  font-size:0.63rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:2px solid var(--gold);
}

details {
  border:1px solid var(--rule);
  border-radius:var(--radius);
  margin-bottom:8px;
  background:#fff;
  overflow:hidden;
}
details[open] { border-color:var(--gold); }

summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--dark);
  cursor:pointer;
  user-select:none;
  gap:12px;
}
summary::-webkit-details-marker { display:none; }
summary::after {
  content:'+';
  font-size:1.2rem;
  font-weight:400;
  color:var(--amber);
  flex-shrink:0;
  transition:transform 0.2s;
}
details[open] summary::after {
  content:'−';
}
summary:hover { background:var(--bg-alt); }

.faq-answer {
  padding:0 20px 18px;
  font-size:0.85rem;
  color:#555;
  line-height:1.8;
  border-top:1px solid var(--rule);
}
.faq-answer p { margin-bottom:8px; }
.faq-answer p:last-child { margin-bottom:0; }
.faq-answer ul {
  margin:8px 0 8px 18px;
}
.faq-answer ul li {
  margin-bottom:4px;
}

/* =====================================================
   ATTRACTION GRID  — Kerikeri guide page
   ===================================================== */
.attraction-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (min-width:768px)  { .attraction-grid { gap:20px; } }
@media (min-width:1024px) { .attraction-grid { grid-template-columns:repeat(4,1fr); gap:24px; } }

.attraction-card {
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--rule);
  transition:box-shadow 0.25s, transform 0.25s;
}
.attraction-card:hover { box-shadow:0 8px 28px rgba(0,0,0,0.08); transform:translateY(-3px); }
.attraction-card img { width:100%; height:140px; object-fit:cover; }
@media (min-width:768px) { .attraction-card img { height:170px; } }
.attraction-body { padding:14px 16px; }
.attraction-body h3 { font-size:0.88rem; font-weight:700; color:var(--dark); margin-bottom:5px; }
.attraction-body p { font-size:0.75rem; color:var(--light); line-height:1.55; margin-bottom:10px; }
.attraction-body a {
  font-size:0.73rem;
  font-weight:700;
  color:var(--amber);
  letter-spacing:0.5px;
}
.attraction-body a:hover { color:var(--dark); }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:800px;
  margin:0 auto 40px;
}
@media (min-width:768px) { .contact-grid { grid-template-columns:repeat(4,1fr); gap:20px; } }

.contact-card {
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 16px;
  text-align:center;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.contact-card:hover { border-color:var(--gold); box-shadow:0 4px 16px rgba(200,147,10,0.1); }

.contact-icon {
  width:44px; height:44px;
  border-radius:50%;
  background:#fffbf0;
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.contact-icon i { color:var(--amber); font-size:1rem; }
.contact-card h3 { font-size:0.75rem; font-weight:700; color:var(--dark); margin-bottom:5px; }
.contact-card p, .contact-card a {
  font-size:0.75rem; color:var(--light);
  line-height:1.6; display:block;
}
.contact-card a:hover { color:var(--amber); }

.contact-item {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.contact-item:last-child { border-bottom:none; }
.contact-item i { color:var(--amber); font-size:1rem; margin-top:3px; flex-shrink:0; }
.contact-item h4 { font-size:0.82rem; font-weight:700; color:var(--dark); margin-bottom:3px; }
.contact-item p, .contact-item a { font-size:0.8rem; color:var(--light); line-height:1.6; }
.contact-item a:hover { color:var(--amber); }

.map-wrap {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--rule);
  max-width:900px;
  margin:0 auto 40px;
  box-shadow:var(--shadow);
}
.map-wrap iframe {
  display:block;
  width:100%;
  height:380px;
  border:0;
}
@media (min-width:768px) { .map-wrap iframe { height:460px; } }

/* =====================================================
   SEASONAL GRID  — kerikeri.html
   ===================================================== */
.seasonal-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:28px;
}
@media (min-width:768px) { .seasonal-grid { grid-template-columns:repeat(4,1fr); } }

.season-card {
  border-radius:var(--radius);
  padding:20px;
}
.season-card h3 {
  font-size:0.88rem;
  font-weight:700;
  margin-bottom:12px;
}
.season-card ul { list-style:none; padding:0; margin:0; }
.season-card ul li {
  margin-bottom:7px;
  font-size:0.78rem;
  color:var(--mid);
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.4;
}
.season-card ul li i { font-size:0.72rem; margin-top:3px; flex-shrink:0; }

.season-summer { background:#fffbf0; border-top:3px solid var(--amber); }
.season-summer h3 { color:var(--amber); }
.season-summer li i { color:var(--amber); }

.season-autumn { background:#fff8f0; border-top:3px solid #E2944A; }
.season-autumn h3 { color:#E2944A; }
.season-autumn li i { color:#E2944A; }

.season-winter { background:#f0fff8; border-top:3px solid #2a9d6b; }
.season-winter h3 { color:#2a9d6b; }
.season-winter li i { color:#2a9d6b; }

.season-spring { background:#fff0f8; border-top:3px solid #c04090; }
.season-spring h3 { color:#c04090; }
.season-spring li i { color:#c04090; }

/* =====================================================
   FEATURE BOX GRID  — text-heavy 2-col cards
   ===================================================== */
.feature-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:28px;
}
@media(min-width:640px) { .feature-grid { grid-template-columns:1fr 1fr; } }

.feature-box {
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:20px 22px;
}
.feature-box h3 { font-size:0.88rem; font-weight:700; color:var(--dark); margin-bottom:10px; }
.feature-box p { font-size:0.8rem; color:var(--mid); line-height:1.65; margin-bottom:8px; }
.feature-box p:last-child { margin-bottom:0; }
.feature-box ul { list-style:none; padding:0; margin:0; }
.feature-box ul li { font-size:0.78rem; color:var(--mid); margin-bottom:8px; padding-left:16px; position:relative; line-height:1.45; }
.feature-box ul li::before { content:'›'; position:absolute; left:0; color:var(--amber); font-weight:700; }
.feature-box a { color:var(--amber); }
.feature-box a:hover { color:var(--dark); }

.ext-link-btn {
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  color:var(--amber);
  margin-top:10px;
  letter-spacing:0.3px;
  text-decoration:none;
}
.ext-link-btn:hover { color:var(--dark); }

/* =====================================================
   BLOG CARD GRID  — kerikeri.html
   ===================================================== */
.blog-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:28px;
}
@media(min-width:640px)  { .blog-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .blog-grid { grid-template-columns:repeat(4,1fr); } }

.blog-card {
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  transition:border-color .2s, box-shadow .2s;
}
.blog-card:hover { border-color:var(--gold); box-shadow:0 4px 16px rgba(200,147,10,0.08); }
.blog-card h3 { font-size:0.82rem; font-weight:700; color:var(--dark); margin-bottom:6px; line-height:1.35; }
.blog-card p { font-size:0.75rem; color:var(--light); line-height:1.5; margin-bottom:12px; flex-grow:1; }
.blog-card .read-more { font-size:0.72rem; font-weight:700; color:var(--amber); letter-spacing:0.3px; }
.blog-card .read-more:hover { color:var(--dark); }