/*
 * 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 + office map
 *   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; }
}
/* 4-up variant — Serenity VLifestyle */
.lifestyle-gallery-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .lifestyle-gallery-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .lifestyle-gallery-4 { 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 — THREE-SPREAD EDITORIAL REBUILD (July 2026)
   ============================================================
   Person → Place (both inquire-form.php); the hero (inquire-hero.php) was
   part of this rebuild too but was reverted back to its pre-rebuild
   treatment per client request — .inq-hero-grad below is live again, not
   dead. .office-map-frame / .office-map-embed remain dead rules, left in
   place — the map this page used to have is gone (replaced by a plain
   "Get directions" link in Spread Three) and removing unused CSS wasn't
   required for this change. */

.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%
    );
  }
}
.office-map-frame {
  aspect-ratio: 16 / 10;
  max-width: 320px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
}
.office-map-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(35%) saturate(72%);
}

/* ---- Spread One: Land ---- */
/* Photograph and type in one row, not a hero banner. Text aligns to the
   end of the row (the lower third of the photograph's height) rather
   than centering vertically — a deliberate editorial placement, not the
   default "headline centered over hero image." */
.inquire-land-spread {
  grid-template-columns: 0.4fr 0.6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}
.inquire-land-copy {
  padding-bottom: 8px;
}
.inquire-land-photo {
  margin: 0;
}
.inquire-land-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .inquire-land-spread {
    align-items: start;
  }
}

/* ---- Spread Two: Person ---- */
/* Jeff's photograph and the form share one room — deliberately NOT
   .dg-split: that utility collapses to one column at 768px sitewide,
   but this spread's whole idea is keeping photograph and form together
   as long as they're legibly readable, so it carries its own later
   breakpoint (720px) instead of reusing the shared one. */
.inquire-person-spread {
  grid-template-columns: 0.54fr 0.46fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.inquire-jeff-photo {
  margin: 0;
  overflow: hidden;
}
.inquire-jeff-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.inquire-jeff-photo figcaption {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* The form's own block. A hairline LEFT rule (reusing the site's
   existing .editorial-sidebar left-rule motif, not a new device) marks
   it as its own room beside the photograph — replaces the hairline-TOP
   rule from the previous pass, which made sense when the form sat below
   a paragraph but not now that it's a column beside an image. */
.inquire-form-block {
  border-left: 1px solid var(--border-hairline);
  padding-left: clamp(32px, 4vw, 56px);
}
@media (max-width: 720px) {
  .inquire-person-spread {
    grid-template-columns: 1fr !important;
  }
  .inquire-form-block {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-hairline);
    padding-top: 40px;
    margin-top: 48px;
  }
}

/* Page-scoped Fluent Form refinement — .inquire-form-block exists only
   on this page, so none of this touches Forms 4 or 5 (Homepage,
   Serenity) or the shared base rules above (Section on Fluent Forms,
   dg-global.css). The sitewide field treatment is already considered
   (branded border/focus colors, a custom submit button); this goes one
   step further specifically for this page's more editorial composition —
   fields read as lines on a page ("premium stationery") rather than
   boxed software inputs. Submit button and labels are left exactly as
   the sitewide styling already renders them; both were already right. */
.inquire-form-block .fluentform .ff-el-form-control {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-hairline) !important;
  border-radius: 0 !important;
  padding: 12px 2px 11px !important;
}
.inquire-form-block .fluentform .ff-el-form-control:focus {
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: none !important;
  padding-bottom: 10px !important; /* offsets the 1px border growth on focus so the field doesn't shift */
}
.inquire-form-block .fluentform .ff-el-group {
  margin-bottom: 30px !important;
}

/* ---- Spread Three: Place ---- */
/* One photographic plate (lounge, dominant, with the history-wall
   detail overlapping its corner as a small collaged inset) and one text
   block (heading, address as premium stationery, contact details,
   directions) — recomposed from four separate elements down to two. */
.inquire-place-spread {
  grid-template-columns: 0.44fr 0.56fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.inquire-place-plate {
  position: relative;
}
/* Own clipping frame for the lounge photo only — .inquire-place-plate
   itself can't take overflow:hidden, since .inquire-place-detail below
   intentionally overhangs its corner via negative left/bottom offsets. */
.inquire-place-lounge-frame {
  overflow: hidden;
}
.inquire-place-lounge {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}
/* The detail overlaps the lounge photograph's own corner — two related
   photographs sharing one frame, not a third boxed image. The ivory
   border (matching the page's own surface) reads as a print set on top
   of another print; deliberately no box-shadow, keeping this consistent
   with the rest of the site's shadow-free photography treatment. */
.inquire-place-detail {
  position: absolute;
  left: -22px;
  bottom: -30px;
  width: 40%;
  max-width: 210px;
  margin: 0;
  border: 6px solid var(--surface-page-alt);
  overflow: hidden;
}
.inquire-place-detail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Below 640px the absolute-positioned overlap risks horizontal overflow
   on a narrow viewport, so the detail becomes a small static inset
   instead — pulled up slightly with a negative margin to keep some of
   the collaged feeling without the positioning risk. Same fixed-pixel
   sizing precedent as the earlier mobile fix for this exact image. */
@media (max-width: 640px) {
  .inquire-place-detail {
    position: static;
    width: 140px;
    max-width: 140px;
    margin: -36px 0 0 auto;
    border-width: 5px;
  }
}

.inquire-address {
  margin-top: 4px;
}
.inquire-address p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.28;
  color: var(--text-heading);
  margin: 0;
}
.inquire-address-city {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--text-muted);
  margin-top: 8px !important;
}
.inquire-contact-details {
  margin-top: 32px;
  display: grid;
  gap: 8px;
}
.inquire-contact-details a,
.inquire-contact-details p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  margin: 0;
}
.inquire-contact-details a {
  color: var(--text-body);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.inquire-contact-details p {
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .inquire-place-spread {
    grid-template-columns: 1fr !important;
  }
  .inquire-place-copy {
    margin-top: 56px;
  }
}


/* ============================================================
   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;
}