/* Skyland Farm — inner page styles
   Loaded after style.css */

/* sub-hero (page banner) */
.subhero {
  background: var(--c-hunter-deep);
  color: var(--c-cream);
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-brass-dark);
}
.subhero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/hero.jpg");
  background-size: cover; background-position: center 38%;
  opacity: 0.22; filter: blur(1px);
}
.subhero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.subhero .crumbs { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-brass); margin-bottom: 1.5rem; }
.subhero h1 { color: var(--c-cream); max-width: 22ch; }
.subhero h1 em { color: var(--c-brass); font-style: italic; font-variation-settings: "SOFT" 100; }
.subhero .sub { font-family: var(--f-display); font-style: italic; color: rgba(242, 235, 217, 0.78); max-width: 50ch; margin-top: 1rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

/* About — extended */
.about-bio { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 900px) { .about-bio { grid-template-columns: 1fr; } }
.about-bio__photo {
  aspect-ratio: 3/4;
  background-image: url("../assets/denice-portrait.jpg");
  background-image: image-set(url("../assets/denice-portrait.webp") type("image/webp"), url("../assets/denice-portrait.jpg") type("image/jpeg"));
  background-size: cover; background-position: center 18%;
  position: relative;
  box-shadow: var(--shadow-card);
}
.about-bio__photo::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(242, 235, 217, 0.4); pointer-events: none;
}
.about-bio__photo .plaque {
  position: absolute; bottom: 18px; left: 18px;
  background: var(--c-cream); padding: 12px 16px; border: 1px solid var(--c-brass);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-saddle);
}
.about-bio__photo .plaque b { display: block; font-family: var(--f-display); font-style: italic; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--c-hunter-deep); margin-top: 4px; }
.about-bio p { margin: 0 0 1.1rem; color: var(--c-ink-soft); }
.about-bio p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-size: 4rem;
  float: left;
  line-height: 0.9;
  color: var(--c-brass);
  margin: 4px 10px -4px 0;
  font-variation-settings: "SOFT" 100;
}

.venue-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); margin-top: 3rem; }
@media (max-width: 800px) { .venue-cols { grid-template-columns: 1fr; } }
.venue-col h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-saddle); margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(92, 58, 30, 0.25); }
.venue-col ul { list-style: none; padding: 0; margin: 0; }
.venue-col li { padding: 0.7rem 0; border-bottom: 1px dashed rgba(92, 58, 30, 0.18); font-family: var(--f-display); font-size: 1.1rem; color: var(--c-hunter-deep); }
.venue-col li:last-child { border-bottom: 0; }

/* Service detail */
.svc-detail { display: grid; grid-template-columns: 200px 1fr 1.4fr; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2.5rem, 4vw, 3.5rem) 0; border-top: 1px solid rgba(92, 58, 30, 0.18); }
.svc-detail:last-child { border-bottom: 1px solid rgba(92, 58, 30, 0.18); }
.svc-detail__num { font-family: var(--f-display); font-size: 4rem; color: var(--c-brass); line-height: 1; }
.svc-detail__num small { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-saddle); margin-top: 8px; }
.svc-detail h3 { color: var(--c-hunter-deep); margin-bottom: 8px; }
.svc-detail .lead { font-family: var(--f-display); font-style: italic; color: var(--c-saddle); font-size: 1.2rem; }
.svc-detail__list { list-style: none; padding: 0; margin: 0; }
.svc-detail__list li {
  padding: 0.6rem 0 0.6rem 26px;
  border-bottom: 1px dotted rgba(92, 58, 30, 0.18);
  position: relative;
  color: var(--c-ink-soft);
}
.svc-detail__list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 14px; height: 1px;
  background: var(--c-brass);
}
.svc-detail__list li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .svc-detail { grid-template-columns: 1fr; } }

/* Sales — full grid */
.sales-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1000px) { .sales-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .sales-grid { grid-template-columns: 1fr; } }
.sales-disclaimer {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-brass);
  padding: 1.25rem 1.5rem;
  font-family: var(--f-display); font-style: italic; color: var(--c-saddle);
  margin-bottom: 2.5rem;
}

/* Facility — extended */
.fac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.fac-tile {
  background: linear-gradient(135deg, var(--c-saddle) 0%, var(--c-saddle-light) 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: end; padding: 16px;
  color: var(--c-cream);
}
.fac-tile::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: 0.88;
}
.fac-tile > * { position: relative; z-index: 1; }
.fac-tile__cap {
  background: rgba(14, 35, 22, 0.78);
  padding: 10px 14px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.fac-tile__cap b { display: block; font-family: var(--f-display); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--c-brass); margin-bottom: 2px; }
.fac-tile::before { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.fac-tile:hover::before { transform: scale(1.05); }
.fac-a { grid-column: span 2; grid-row: span 2; }
.fac-a::before { background-image: url("../assets/circuit-1.jpg"); }
.fac-b { grid-column: span 2; grid-row: span 1; }
.fac-b::before { background-image: url("../assets/circuit-2.jpg"); }
.fac-c { grid-column: span 1; grid-row: span 1; }
.fac-c::before { background-image: url("../assets/circuit-5.jpg"); }
.fac-d { grid-column: span 1; grid-row: span 1; }
.fac-d::before { background-image: url("../assets/circuit-6.jpg"); background-position: center 30%; }
.fac-e { grid-column: span 2; grid-row: span 1; }
.fac-e::before { background-image: url("../assets/circuit-3.jpg"); }
.fac-f { grid-column: span 2; grid-row: span 1; }
.fac-f::before { background-image: url("../assets/circuit-4.jpg"); }
.fac-g { grid-column: span 4; grid-row: span 1; }
.fac-g::before { background-image: url("../assets/hero.jpg"); background-position: center 40%; }
@media (max-width: 900px) {
  .fac-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .fac-a, .fac-b, .fac-c, .fac-d, .fac-e, .fac-f, .fac-g { grid-column: span 2; grid-row: span 1; }
  .fac-a { grid-row: span 2; }
}

/* Visit — dedicated page */
.visit-page-grid {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) { .visit-page-grid { grid-template-columns: 1fr; } }

.directions {
  background: var(--c-paper);
  border: 1px solid var(--c-brass);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: 2.5rem;
}
.directions h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-saddle); margin: 0 0 1rem; }
.directions p { margin: 0 0 0.8rem; color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.6; }

/* location card (visit page) */
.map-card {
  margin-top: 2.5rem;
  display: flex; align-items: center; gap: 18px;
  background: var(--c-hunter);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-brass);
  border-radius: 3px;
  padding: 22px 24px;
  color: var(--c-cream);
  box-shadow: var(--shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.map-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(195, 162, 78, 0.08) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(195, 162, 78, 0.08) 0 1px, transparent 1px 30px);
}
.map-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.map-card__pin {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-brass);
  color: var(--c-hunter-deep);
  box-shadow: 0 0 0 6px rgba(195, 162, 78, 0.20);
}
.map-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.map-card__body .mono { color: var(--c-brass); text-transform: uppercase; letter-spacing: 0.2em; }
.map-card__body b { font-family: var(--f-display); font-size: 1.15rem; font-weight: 400; color: var(--c-cream); line-height: 1.2; }
.map-card__link { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-brass); margin-top: 4px; }
@media (max-width: 560px) { .map-card { flex-direction: column; align-items: flex-start; text-align: left; } }