/* ═══════════════════════════════════════════════
   WOODSIDE COTTAGE — Shared Stylesheet
   Isle of Arran, Scotland
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --ember:        #8B3A1A;
  --ember-soft:   #B85A2E;
  --heather:      #7A4F6D;
  --heather-light:#C4A0B8;
  --moss:         #4A5E3A;
  --moss-light:   #8A9E72;
  --cream:        #F5EFE0;
  --warm-white:   #FAF6EE;
  --sand:         #D4B896;
  --sand-light:   #EDD9C0;
  --smoke:        #9E8E7E;
  --gold:         #C4893A;
  --gold-light:   #E8C080;
  --slate:        #4A5568;
  --dark:         #2C1A0E;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Lora',Georgia,serif;
  background:var(--warm-white);
  color:var(--dark);
  overflow-x:hidden;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Playfair Display',serif; font-weight:400; }
p { line-height:1.85; }
a { color:var(--ember); }
a:hover { color:var(--dark); }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.1rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  background:rgba(244,238,224,0.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(196,137,58,0.22);
}
.nav-logo { font-family:'Playfair Display',serif; font-size:1.25rem; font-style:italic; color:var(--ember); text-decoration:none; line-height:1.2; }
.nav-logo span { display:block; font-size:0.62rem; font-style:normal; font-family:'Lora',serif; letter-spacing:0.18em; text-transform:uppercase; color:var(--smoke); margin-top:2px; }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; flex-wrap:wrap; }
.nav-links a { font-family:'Lora',serif; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); text-decoration:none; transition:color 0.2s; position:relative; white-space:nowrap; }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:var(--gold); transform:scaleX(0); transition:transform 0.25s; }
.nav-links a:hover { color:var(--ember); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-links a.active { color:var(--ember); }
.nav-links a.active::after { transform:scaleX(1); }
.nav-book { background:var(--ember)!important; color:var(--cream)!important; padding:0.45rem 1.1rem; border-radius:2px; }
.nav-book::after { display:none!important; }
.nav-book:hover { background:var(--dark)!important; color:var(--gold-light)!important; }

/* ── PAGE HERO BAND (inner pages) ── */
.page-hero {
  padding:8rem 3rem 4rem;
  background:linear-gradient(135deg, var(--cream) 0%, var(--sand-light) 100%);
  border-bottom:1px solid var(--sand);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:repeating-linear-gradient(90deg,
    var(--ember) 0px, var(--ember) 20px,
    var(--heather) 20px, var(--heather) 28px,
    var(--moss) 28px, var(--moss) 36px,
    var(--dark) 36px, var(--dark) 40px,
    var(--moss) 40px, var(--moss) 48px,
    var(--heather) 48px, var(--heather) 56px,
    var(--ember) 56px, var(--ember) 60px
  );
  opacity:0.06;
}
.page-hero-inner { max-width:1100px; margin:0 auto; position:relative; }
.page-breadcrumb { font-size:0.7rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--smoke); margin-bottom:1rem; }
.page-breadcrumb a { color:var(--smoke); text-decoration:none; }
.page-breadcrumb a:hover { color:var(--ember); }
.page-title { font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.1; color:var(--dark); }
.page-title em { font-style:italic; color:var(--ember); }
.page-subtitle { margin-top:1rem; font-size:1rem; color:var(--smoke); font-style:italic; max-width:600px; }

/* ── SECTION LAYOUT ── */
.section-wrap { padding:5rem 3rem; max-width:1100px; margin:0 auto; }
.section-wrap.narrow { max-width:760px; }
.section-label { font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }
.section-title { font-size:clamp(1.8rem,3.5vw,2.8rem); color:var(--dark); line-height:1.2; }
.section-title em { font-style:italic; color:var(--ember); }

/* ── TARTAN ── */
.tartan { width:100%; height:6px; background:repeating-linear-gradient(90deg,var(--ember) 0px,var(--ember) 20px,var(--heather) 20px,var(--heather) 28px,var(--moss) 28px,var(--moss) 36px,var(--dark) 36px,var(--dark) 40px,var(--moss) 40px,var(--moss) 48px,var(--heather) 48px,var(--heather) 56px,var(--ember) 56px,var(--ember) 60px); opacity:0.7; }

/* ── BUTTONS ── */
.btn-primary,.btn-secondary { padding:0.82rem 2rem; font-family:'Lora',serif; font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:all 0.25s; display:inline-block; cursor:pointer; border:none; }
.btn-primary { background:var(--ember); color:var(--cream); border:1px solid var(--ember); }
.btn-primary:hover { background:var(--dark); border-color:var(--dark); color:var(--gold-light); }
.btn-secondary { background:transparent; color:var(--ember); border:1px solid var(--ember); }
.btn-secondary:hover { background:var(--ember); color:var(--cream); }

/* ── IMAGE PLACEHOLDERS ── */
.img-slot {
  position:relative;
  background:var(--sand-light);
  border:2px dashed var(--sand);
  border-radius:4px;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.6rem;
  color:var(--smoke);
  font-family:'Lora',serif;
  font-size:0.82rem;
  font-style:italic;
  text-align:center;
  padding:1rem;
  cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
}
.img-slot:hover { border-color:var(--gold); background:var(--cream); }
.img-slot svg { opacity:0.45; }
.img-slot .img-slot-label { font-size:0.75rem; letter-spacing:0.08em; color:var(--ember); font-style:normal; text-transform:uppercase; font-weight:500; }
.img-slot .img-slot-hint { font-size:0.72rem; opacity:0.7; margin-top:0.2rem; }
/* When a real image is placed, it fills the slot */
.img-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Photo grid */
.photo-grid { display:grid; gap:1rem; }
.photo-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.photo-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.photo-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.photo-grid .img-slot { aspect-ratio:4/3; }
.photo-grid .img-slot.tall { aspect-ratio:3/4; }
.photo-grid .img-slot.wide { grid-column:span 2; aspect-ratio:16/9; }

/* ── PROSE CONTENT ── */
.prose { max-width:720px; }
.prose p { font-size:1rem; color:var(--slate); margin-bottom:1.4rem; line-height:1.9; }
.prose p:first-child::first-letter { font-family:'Playfair Display',serif; font-size:3.2em; font-weight:400; float:left; line-height:0.82; margin-right:0.1em; margin-top:0.08em; color:var(--ember); }
.prose h3 { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--ember); margin:2rem 0 0.8rem; font-style:italic; }
.prose blockquote { border-left:3px solid var(--gold); padding-left:1.5rem; margin:2rem 0; font-style:italic; color:var(--smoke); font-size:1.05rem; line-height:1.8; }
.prose ul { padding-left:1.5rem; margin-bottom:1.4rem; color:var(--slate); font-size:0.95rem; line-height:2; }

/* ── INFO CARDS ── */
.info-card { background:var(--cream); border:1px solid var(--sand); border-radius:4px; padding:2rem; position:relative; overflow:hidden; }
.info-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(to bottom,var(--ember),var(--gold)); }
.info-card-title { font-family:'Playfair Display',serif; font-size:1.05rem; font-style:italic; color:var(--ember); margin-bottom:1rem; }

/* ── SPLIT LAYOUT ── */
.split { display:grid; gap:4rem; align-items:start; }
.split.v2 { grid-template-columns:1fr 1fr; }
.split.v3 { grid-template-columns:1.4fr 1fr; }
.split.v3r { grid-template-columns:1fr 1.4fr; }

/* ── FEATURE CARD ── */
.feature-card { padding:1.8rem; background:var(--cream); border:1px solid var(--sand-light); border-radius:4px; transition:transform 0.3s,box-shadow 0.3s; position:relative; overflow:hidden; }
.feature-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(to right,var(--ember),var(--gold)); transform:scaleX(0); transition:transform 0.3s; transform-origin:left; }
.feature-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(44,26,14,0.1); }
.feature-card:hover::after { transform:scaleX(1); }
.feature-icon { font-size:1.5rem; margin-bottom:0.8rem; display:block; }
.feature-title { font-family:'Playfair Display',serif; font-size:1rem; font-style:italic; color:var(--ember); margin-bottom:0.5rem; }
.feature-desc { font-size:0.87rem; line-height:1.7; color:var(--slate); }

/* ── FOOTER ── */
footer { background:var(--dark); color:rgba(255,255,255,0.45); padding:3.5rem 3rem; text-align:center; font-size:0.8rem; letter-spacing:0.1em; }
footer strong { display:block; font-family:'Playfair Display',serif; font-size:1.3rem; font-style:italic; font-weight:400; color:var(--gold-light); margin-bottom:0.5rem; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:0.5rem 2rem; margin:1.2rem 0; }
.footer-links a { color:rgba(255,255,255,0.45); text-decoration:none; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold-light); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.8s ease,transform 0.8s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── DARK BAND ── */
.dark-band { background:var(--dark); color:var(--cream); }
.dark-band .section-label { color:var(--gold-light); }
.dark-band .section-title { color:var(--cream); }
.dark-band .section-title em { color:var(--gold-light); }
.dark-band p { color:rgba(255,255,255,0.68); }

/* ── HEATHER BAND ── */
.heather-band { background:linear-gradient(135deg,var(--heather) 0%,#5C3A5A 100%); color:white; }
.heather-band .section-label { color:var(--heather-light); }
.heather-band .section-title { color:white; }
.heather-band .section-title em { color:var(--gold-light); }
.heather-band p { color:rgba(255,255,255,0.78); }

/* ── MOSS BAND ── */
.moss-band { background:var(--moss); color:var(--cream); }

/* ── TRUST BADGES ── */
.trust-row { display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap; margin:1.8rem 0; }
.trust-badge { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--slate); }
.trust-icon { width:20px; height:20px; color:var(--gold); flex-shrink:0; }

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav { padding:1rem 1.5rem; }
  .nav-links { gap:1.2rem; }
  .split.v2,.split.v3,.split.v3r { grid-template-columns:1fr; }
  .section-wrap { padding:3.5rem 1.5rem; }
  .photo-grid.cols-3 { grid-template-columns:repeat(2,1fr); }
  .photo-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .nav-links { display:none; }
  .photo-grid.cols-2 { grid-template-columns:1fr; }
  .photo-grid.cols-3 { grid-template-columns:1fr; }
  .trust-row { flex-direction:column; align-items:center; gap:1rem; }
}