/*
 * dg-shortcodes.css — Davis Group Child Theme
 * Supplemental styles for the PHP shortcode system (inc/shortcodes.php).
 *
 * dg-global.css already covers every class used on the homepage build
 * (eyebrow, stat-block, community-card, buttons, header/footer, forms,
 * vision-band, release-rows, team cards, master plan). This file adds ONLY
 * the classes needed by the inner-page shortcodes (Stringfield lifestyle
 * gallery, Legacy project rows, About team row + editorial sidebar, Inquire
 * hero gradient) that exist in the original Next.js app/globals.css but were
 * never ported into dg-global.css.
 *
 * Loads after dg-global.css — see functions.php enqueue block.
 *
 * Sections:
 *   0. Shared responsive grid utilities (used across every section partial)
 *   1. SLifestyle — activities checklist + photo gallery
 *   2. LegacyProjects — numbered photo rows
 *   3. AboutTeam — portrait + bio row, standalone "Connect with us" link
 *   4. AboutStory — sticky editorial sidebar
 *   5. Inquire — hero gradient
 *   6. Missing-content placeholder (shown for a missing partial file, or if
 *      Fluent Forms isn't installed — see dg_partial() / dg_fluent_form() in
 *      inc/shortcodes.php)
 */


/* ============================================================
   0. SHARED RESPONSIVE GRID UTILITIES
   Every section partial sets its own desktop grid-template-columns/gap
   inline (mirroring the original Next.js inline styles exactly). These
   classes only override the column count at mobile widths — the !important
   is required because it must beat the element's own inline style, the same
   role Tailwind's `!` modifier played in the original React components.
   ============================================================ */

/* Any 2-column split (image+text, text+form, etc.) */
.dg-split {}
@media (max-width: 768px) {
  .dg-split { grid-template-columns: 1fr !important; }
}

/* Any 3-column grid (features, pillars, team) */
.dg-grid-3 {}
@media (max-width: 768px) {
  .dg-grid-3 { grid-template-columns: 1fr !important; }
}

/* 4-column grid (homepage JeffTeam — Pam, Gianna, Jim, Debbie).
   4 → 2 → 1 to match the reference's lg/sm breakpoints, rather than
   .dg-grid-3's single straight-to-1-column collapse. */
.dg-grid-4 {}
@media (max-width: 1024px) {
  .dg-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .dg-grid-4 { grid-template-columns: 1fr !important; }
}

/* 6-stat grid (About page career highlights) — 3 cols → 2 cols → 1 col,
   with a border-left divider on every column except the first in each row. */
.stat-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 8px;
}
.stat-grid-6 > *:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--border-soft);
  padding-left: 40px;
}
@media (max-width: 768px) {
  .stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-6 > *:not(:nth-child(3n+1)) { border-left: none; padding-left: 0; }
  .stat-grid-6 > *:nth-child(even) { border-left: 1px solid var(--border-soft); padding-left: 40px; }
}
@media (max-width: 640px) {
  .stat-grid-6 { grid-template-columns: 1fr; text-align: center; }
  .stat-grid-6 > * { border-left: none !important; padding-left: 0 !important; }
}

/* 5-stat variant (About page, July 2026 revision — the commercial
   square-footage stat was retired, residential statistics only).
   Desktop uses a 6-track grid with 2-track spans so the second row's
   two stats sit centered under the first row's three, instead of
   leaving a hole. Divider logic mirrors .stat-grid-6: border on every
   stat except the first of each visual row. */
.stat-grid-5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 44px 8px;
}
.stat-grid-5 > * { grid-column: span 2; }
.stat-grid-5 > *:nth-child(4) { grid-column: 2 / span 2; }
.stat-grid-5 > *:not(:nth-child(3n+1)) {
  border-left: 1px solid var(--border-soft);
  padding-left: 40px;
}
@media (max-width: 768px) {
  .stat-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid-5 > *,
  .stat-grid-5 > *:nth-child(4) { grid-column: auto; }
  .stat-grid-5 > *:not(:nth-child(3n+1)) { border-left: none; padding-left: 0; }
  .stat-grid-5 > *:nth-child(even) { border-left: 1px solid var(--border-soft); padding-left: 40px; }
  .stat-grid-5 > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .stat-grid-5 { grid-template-columns: 1fr; text-align: center; }
  .stat-grid-5 > *,
  .stat-grid-5 > *:nth-child(4),
  .stat-grid-5 > *:last-child { grid-column: auto; border-left: none !important; padding-left: 0 !important; }
}


/* ============================================================
   1. SLIFESTYLE — ACTIVITIES CHECKLIST + PHOTO GALLERY
   ============================================================ */

.activities-list {
  display: grid;
  gap: 2px;
}
.activity-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-on-dark);
}
.activity-check {
  color: var(--bronze-200);
  flex-shrink: 0;
}
.activity-item span {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--pine-100);
}

.lifestyle-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .lifestyle-gallery { grid-template-columns: 1fr; }
}
.gallery-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.gallery-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-tile:hover img {
  transform: scale(1.04);
}
.gallery-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 36, 26, 0.6), transparent 55%);
}
.gallery-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--paper-92);
}


/* ============================================================
   2. LEGACYPROJECTS — NUMBERED PHOTO ROWS
   ============================================================ */

.legacy-project-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--border-hairline);
  align-items: start;
  min-height: 200px;
}
.legacy-photo-wrap {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 55%;
  z-index: 0;
  pointer-events: none;
}
.legacy-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.legacy-photo-grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--surface-page) 0%,
    var(--surface-page) 38%,
    rgba(246, 241, 231, 0.97) 48%,
    rgba(246, 241, 231, 0.88) 56%,
    rgba(246, 241, 231, 0.68) 64%,
    rgba(246, 241, 231, 0.44) 72%,
    rgba(246, 241, 231, 0.18) 82%,
    rgba(246, 241, 231, 0) 92%
  );
}
.legacy-index {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--stone-200);
  padding-top: 6px;
}
.legacy-content {
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) {
  .legacy-photo-wrap,
  .legacy-photo-grad {
    display: none;
  }
  .legacy-project-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ============================================================
   3. ABOUTTEAM — PORTRAIT + BIO ROW, STANDALONE TEAM-EMAIL LINK
   ============================================================ */

.about-team-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 720px) {
  .about-team-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about-team-row > div:first-child {
    max-width: 220px;
  }
}

/* Standalone variant — used on the About page team row, which is a plain
   two-column layout (not the .dg-team-card grid used on the homepage). */
.team-email {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--accent-strong);
  text-decoration: none;
  padding-bottom: 5px;
}
.team-email::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--bronze-500), var(--bronze-200));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.team-email:hover::after,
.team-email:focus-visible::after {
  transform: scaleX(1);
}
.team-email svg {
  color: var(--bronze-500);
  transition: transform var(--dur-base) var(--ease-out);
}
.team-email:hover svg {
  transform: translateX(2px);
}


/* ============================================================
   4. ABOUTSTORY — STICKY EDITORIAL SIDEBAR
   ============================================================ */

.editorial-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-left: 56px;
  border-left: 1.5px solid rgba(176, 129, 79, 0.25);
}
@media (max-width: 1023px) {
  .editorial-sidebar {
    position: static;
    padding-left: 0;
    border-left: none;
    margin-top: 96px;
  }
}


/* ============================================================
   5. INQUIRE — HERO GRADIENT
   ============================================================ */

.inq-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--surface-page-alt) 0%,
    var(--surface-page-alt) 42%,
    rgba(239, 232, 218, 0.55) 68%,
    rgba(239, 232, 218, 0) 100%
  );
}
@media (max-width: 768px) {
  .inq-hero-grad {
    background: linear-gradient(
      to right,
      var(--surface-page-alt) 0%,
      var(--surface-page-alt) 58%,
      rgba(239, 232, 218, 0.72) 80%,
      rgba(239, 232, 218, 0.15) 100%
    );
  }
}


/* ============================================================
   6. MISSING-CONTENT PLACEHOLDER
   Shown for a missing partial file, or when the [fluentform] shortcode
   isn't registered yet (i.e. Fluent Forms isn't installed/active).
   See dg_partial() / dg_fluent_form() in inc/shortcodes.php.
   ============================================================ */

.dg-notice-placeholder {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface-page-alt);
  border: 1px dashed var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin: 0;
}