/*
Door Styles & Materials page — styles unique to this page only.
Everything else it needs (reset, :root palette, body/html, nav, hamburger,
mobile menu, footer, .btn-primary, .fade-in, .lightbox*) already lives in
the shared style.css and loads on every page via ironwood_enqueue_styles().
This file is enqueued ONLY on the Door Styles & Materials page template
(see the is_page_template() check added to functions.php) so it never
adds weight to the rest of the site.
*/

/* ── PAGE HEADER ── */
.page-header {
  position: relative;
  background: var(--forest-deep);
  padding: 156px 80px 64px;
  overflow: hidden;
  text-align: center;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 20%, rgba(176,144,61,0.09) 0%, transparent 60%),
    linear-gradient(135deg, #0D1D17 0%, #162B22 60%, #16281f 100%);
}
.page-header-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.crumb {
  font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(237,228,208,0.4); margin-bottom: 22px;
}
.crumb a { color: rgba(237,228,208,0.4); text-decoration: none; }
.crumb a:hover { color: var(--gold-light); }
.page-eyebrow {
  font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.page-eyebrow::before, .page-eyebrow::after { content: ''; width: 30px; height: 1px; background: var(--gold); opacity: 0.6; }
.page-title {
  font-family: 'Playfair Display', serif; font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600; line-height: 1.12; color: #EDE4D0; margin-bottom: 20px; letter-spacing: -0.01em;
}
.page-title em { font-style: italic; color: var(--gold-light); }
.page-sub {
  font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 300;
  line-height: 1.65; color: rgba(237,228,208,0.55); max-width: 560px; margin: 0 auto;
}

/* ── TAB SWITCHER ── */
.tabs-bar {
  position: sticky; top: 72px; z-index: 150;
  background: rgba(244,239,230,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(176,144,61,0.25);
}
.tabs-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 4px; padding: 0 80px;
}
.tab-btn {
  font-family: 'Raleway', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mid); background: none; border: none;
  padding: 22px 0; margin-right: 40px; cursor: pointer;
  position: relative; white-space: nowrap; transition: color 0.2s;
}
.tab-btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.tab-btn.active { color: var(--forest); }
.tab-btn.active::after { transform: scaleX(1); }
.tab-btn:hover { color: var(--forest); }
.tab-count {
  display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 600;
  color: var(--gold-muted);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── SECTION WRAP ── */
/* .section-header / .section-eyebrow / .section-title are already defined in
   the shared style.css (from the homepage's Process section) and are reused
   here for visual consistency across the site. That shared rule lays its
   children out as a flex row with space-between, built for exactly two
   items (a title group plus a ".section-link" off to the side). This page
   instead stacks 2-3 plain children (eyebrow, title, note) inside
   .section-header, so it's overridden below to a simple block layout with
   normal margin-based spacing instead of being spread apart horizontally.
   .section-wrap (this page's content width) and .section-note (new) are
   added here too. */
.section-wrap { padding: 76px 80px 100px; max-width: 1240px; margin: 0 auto; }
.section-wrap .section-header {
  display: block;
  max-width: 720px;
  margin: 0 0 44px;
}
.section-wrap .section-header .section-eyebrow { margin-bottom: 14px; }
.section-wrap .section-header .section-title { margin-bottom: 18px; }
.section-note {
  font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.7;
  color: var(--text-mid); max-width: 680px;
}
.section-wrap .section-header .section-note { margin: 0; }

/* ── DOOR STYLE CARDS ── */
.style-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.style-card {
  background: #fff; border: 1px solid rgba(176,144,61,0.16);
  cursor: pointer; transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
}
.style-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(22,43,34,0.13); border-color: rgba(176,144,61,0.35); }
.style-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 18px 38px rgba(22,43,34,0.13); }
.style-check {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--gold); color: var(--forest-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s; z-index: 2;
}
.style-card.selected .style-check { opacity: 1; transform: scale(1); }
.style-visual {
  background: var(--cream-warm); aspect-ratio: 4/3;
  overflow: hidden;
}
.style-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.style-card:hover .style-visual img { transform: scale(1.05); }
.style-body { padding: 24px 26px 28px; }
.style-name {
  font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600;
  color: var(--forest); margin-bottom: 9px; line-height: 1.25;
}
.style-desc { font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.65; color: var(--text-mid); margin-bottom: 16px; }
.style-tag {
  display: inline-block; font-family: 'Raleway', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  border-top: 1px solid rgba(176,144,61,0.28); padding-top: 11px; width: 100%;
}

/* ── MATERIALS ── */
.material-group { margin-bottom: 46px; }
.material-group-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(176,144,61,0.22);
}
.material-species {
  font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; color: var(--forest);
}
.material-species-count {
  font-family: 'Raleway', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-muted);
}
.material-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px;
}
.material-card { background: #fff; border: 1px solid rgba(176,144,61,0.14); transition: box-shadow 0.25s, border-color 0.25s; }
.material-card:hover { box-shadow: 0 12px 28px rgba(22,43,34,0.1); }
.material-photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: zoom-in;
  background: var(--cream-warm);
}
.material-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.material-card:hover .material-photo img { transform: scale(1.06); }
.material-overlay {
  position: absolute; inset: 0; background: rgba(13,29,23,0); transition: background 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.material-photo:hover .material-overlay { background: rgba(13,29,23,0.28); }
.material-zoom { opacity: 0; transition: opacity 0.25s; color: #fff; font-size: 22px; line-height: 1; }
.material-photo:hover .material-zoom { opacity: 1; }
.material-card.img-fallback .material-photo img { display: none; }
.material-card.img-fallback .material-photo {
  background: linear-gradient(135deg, var(--cream-warm), #d9c9a8);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
}
.material-card.img-fallback .material-photo::before {
  content: attr(data-fallback-label);
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px;
  color: var(--gold-muted);
}
.material-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; cursor: pointer; user-select: none;
}
.material-name { font-family: 'Playfair Display', serif; font-size: 15.5px; font-weight: 600; color: var(--forest); }
.material-grade {
  display: block; font-family: 'Raleway', sans-serif; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-muted); margin-top: 2px;
}
.material-select-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(176,144,61,0.4);
  flex-shrink: 0; position: relative; transition: border-color 0.2s, background 0.2s;
}
.material-card.selected .material-select-dot { background: var(--gold); border-color: var(--gold); }
.material-card.selected .material-select-dot::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--forest-deep); font-size: 11px; font-weight: 700;
}
.material-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }

.materials-credit {
  margin-top: 8px; font-family: 'Raleway', sans-serif; font-size: 10.5px;
  letter-spacing: 0.05em; color: var(--gold-muted);
}
.materials-credit a { color: var(--gold-muted); }

/* ── SELECTION BAR ── */
.selection-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  background: var(--forest-deep); border-top: 1px solid rgba(176,144,61,0.3);
  transform: translateY(100%); transition: transform 0.35s ease;
  padding: 16px 44px;
}
.selection-bar.show { transform: translateY(0); }
.selection-bar-inner {
  max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.selection-label {
  font-family: 'Raleway', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(176,144,61,0.55); margin-bottom: 4px;
}
.selection-value {
  font-family: 'Playfair Display', serif; font-size: 16px; color: #EDE4D0;
}
.selection-value em { color: var(--gold-light); font-style: normal; }
.selection-actions { display: flex; align-items: center; gap: 20px; }
.selection-clear {
  font-family: 'Raleway', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(237,228,208,0.45); text-decoration: none; cursor: pointer; background: none; border: none;
}
.selection-clear:hover { color: rgba(237,228,208,0.75); }

/* body needs room for the fixed selection bar on this page only */
body.page-template-page-door-styles { padding-bottom: 78px; }

/* ═══ RESPONSIVE (page-specific only — nav/footer breakpoints are shared) ═══ */
@media (max-width: 1024px) {
  .page-header { padding: 140px 40px 56px; }
  .tabs-inner { padding: 0 40px; }
  .section-wrap { padding: 60px 40px 80px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tabs-bar { top: 64px; }
  .page-header { padding: 122px 24px 48px; }
  .tabs-inner { padding: 0 24px; }
  .section-wrap { padding: 48px 20px 72px; }
  .style-grid { grid-template-columns: 1fr; }
  .selection-bar { padding: 14px 20px; }
  .selection-bar-inner { justify-content: center; text-align: center; }
  .tabs-inner { gap: 0; }
  .tab-btn { flex: 1; margin-right: 0; font-size: 10px; letter-spacing: 0.1em; text-align: center; padding: 18px 4px; }
  .tab-count { display: block; margin-left: 0; }
}