/* ===============================
   TownX Projects (scoped styles)
   =============================== */

/* Vars live on wrapper so we don't clash site-wide */
.tx-project{
  --bg:#fff; --ink:#0f172a; --muted:#475569;
  --ah-accent:#28322d; --tx-accent:#ae7f43;
  --panel:#fff; --panel-soft:#f5f7f9;
  --chip:#e9eff5; --chip-active:#dde7f1;
  --br:16px; --ease:ease-in;
}

/* Base layout/typography (scoped) */
.tx-project *{ box-sizing:border-box }
.tx-project section{
  position:relative;
  padding:clamp(48px,8vw,96px) clamp(16px,4vw,64px);
  background:#fff;
}
.tx-project .wrap{ max-width:1200px; margin:0 auto }
.tx-project h1,.tx-project h2,.tx-project h3{ margin:0 0 12px }
.tx-project h1,.tx-project h2{ color:var(--ah-accent) }
.tx-project p{ margin:0 0 12px; color:var(--muted) }

/* Ambient gradient overlays (brand-soft) */
.tx-project .ambient{ position:relative; overflow:hidden }
.tx-project .ambient::before{
  content:""; position:absolute; inset:-22%; pointer-events:none;
  --a: rgba(174,127,67,.06);  /* TownX gold */
  --b: rgba(0,0,0,.035);      /* neutral haze */
  --c: rgba(40,50,45,.05);    /* AH green */
  background:
    radial-gradient(520px 520px at 18% 8%,  var(--a), transparent 60%),
    radial-gradient(680px 680px at 82% 18%, var(--b), transparent 60%),
    radial-gradient(520px 520px at 12% 86%, var(--c), transparent 60%),
    radial-gradient(640px 640px at 86% 86%, var(--b), transparent 62%);
}
.tx-project .ambient--gold::before  { --a:rgba(174,127,67,.06); --b:rgba(0,0,0,.03);  --c:rgba(174,127,67,.045) }
.tx-project .ambient--green::before { --a:rgba(40,50,45,.045);  --b:rgba(0,0,0,.03);  --c:rgba(40,50,45,.06) }
.tx-project .ambient--grey::before  { --a:rgba(15,23,42,.03);   --b:rgba(0,0,0,.025); --c:rgba(15,23,42,.035) }

/* Optional faint dots */
.tx-project .dots-faint::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(40,50,45,.03) 1.2px, transparent 1px);
  background-size:20px 20px; pointer-events:none;
}

/* Cards / panels */
.tx-project .panel{
  background:var(--panel); border-radius:var(--br);
  padding:clamp(20px,3vw,28px);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  position:relative; z-index:1;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.tx-project .panel:hover{ box-shadow:0 14px 36px rgba(2,6,23,.10); transform:translateY(-2px) }
.tx-project .hr-accent{ width:64px; height:6px; border-radius:6px; background:var(--tx-accent); margin:10px 0 16px }

/* Smooth reveal */
.tx-project .reveal{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease) }
.tx-project .reveal.in-view{ opacity:1; transform:none }

/* Grid helpers */
.tx-project .grid{ display:grid; gap:clamp(16px,3vw,28px); grid-template-columns:repeat(12,1fr); align-items:center }
.tx-project .col-6{ grid-column:span 6 }
@media (max-width:900px){ .tx-project .col-6{ grid-column:span 12 } }

/* Buttons / chips */
.tx-project .row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.tx-project .chips{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px }
.tx-project .chip{
  appearance:none; border:0; border-radius:999px;
  padding:.55rem 1rem; background:var(--chip); color:var(--ink);
  cursor:pointer; font-weight:600;
  transition:background .32s var(--ease), transform .32s var(--ease), color .32s var(--ease);
}
.tx-project .chip:hover{ transform:translateY(-1px) }
.tx-project .chip.active{ background:var(--chip-active) }

.tx-project .cta{
  display:inline-block; margin-top:6px; padding:.85rem 1.15rem;
  background:var(--ah-accent); color:#fff; border-radius:12px; text-decoration:none; font-weight:700;
  box-shadow:0 10px 20px rgba(40,50,45,.18);
  transition:background .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.tx-project .cta:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(40,50,45,.22) }
.tx-project .cta.secondary{ background:#fff; color:var(--ah-accent); border:1.5px solid var(--tx-accent); box-shadow:none }
.tx-project .cta.secondary:hover{ background:#fafafa }

.tx-project .pill{
  display:inline-block; padding:.38rem .65rem; border-radius:999px; font-weight:700;
  background:#fff3e0; color:#4a3621; border:1px solid rgba(174,127,67,.35); font-size:.8rem;
  transition:background .32s var(--ease);
}

/* Stats grid (4-up on desktop) */
.tx-project .stats{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); margin-top:14px }
.tx-project .stat{
  grid-column:span 3; background:var(--panel-soft); border-radius:12px; padding:14px 16px;
  transition:background .32s var(--ease), transform .32s var(--ease);
}
.tx-project .stat:hover{ transform:translateY(-2px) }
.tx-project .stat b{ font-size:1.05rem; color:#0f172a }
.tx-project .stat small{ display:block; color:var(--muted) }
@media (max-width:900px){ .tx-project .stat{ grid-column:span 6 } }
@media (max-width:560px){ .tx-project .stat{ grid-column:span 12 } }

/* If you ever need a 3-up variant: add class .stats--3 to the wrapper */
.tx-project .stats.stats--3 .stat{ grid-column:span 4 }

/* Gallery */
.tx-project .gallery-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.tx-project .gallery-grid a{
  display:block; grid-column:span 4; background:#eef2f7; border-radius:14px; overflow:hidden;
  box-shadow:0 10px 28px rgba(2,6,23,.08);
  transition:transform .4s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease);
}
.tx-project .gallery-grid a:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(2,6,23,.12) }
.tx-project .gallery-grid img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.tx-project .gallery-grid a:hover img{ transform:scale(1.02) }
@media (max-width:900px){ .tx-project .gallery-grid a{ grid-column:span 6 } }
@media (max-width:600px){ .tx-project .gallery-grid a{ grid-column:span 12 } }

/* Amenities */
.tx-project .amenities{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); margin-top:8px }
.tx-project .amenity{
  grid-column:span 4; background:var(--panel); border:1px solid #e6eaf0; border-radius:12px; padding:14px 16px;
  display:flex; gap:10px; align-items:flex-start;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.tx-project .amenity:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.08) }
.tx-project .tick{
  display:inline-grid; place-items:center; flex:0 0 24px; height:24px; width:24px;
  border-radius:999px; background:#e8f2ec; color:var(--ah-accent); font-weight:800;
}
@media (max-width:900px){ .tx-project .amenity{ grid-column:span 6 } }
@media (max-width:560px){ .tx-project .amenity{ grid-column:span 12 } }

/* FAQ */
.tx-project #faq details{ position:relative; background:var(--panel); border-radius:12px; padding:0 16px; border:1px solid #e5e9ef }
.tx-project #faq details + details{ margin-top:10px }
.tx-project #faq summary{ list-style:none; cursor:pointer; padding:16px 4px; font-weight:700; color:var(--ah-accent) }
.tx-project #faq summary::-webkit-details-marker{ display:none }
.tx-project #faq details > *:not(summary){
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s var(--ease), opacity .38s var(--ease), padding .38s var(--ease);
  padding:0 4px;
}
.tx-project #faq details[open] > *:not(summary){ max-height:420px; opacity:1; padding-bottom:16px }

/* Utility */
.tx-project .spacer{ height:40px }
.tx-project .muted{ color:var(--muted) }
.tx-project .kicker{ color:var(--tx-accent); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem }
.tx-project .lead{ font-size:1.05rem }
.tx-project .img-card{ border-radius:14px; overflow:hidden; box-shadow:0 10px 28px rgba(2,6,23,.08) }
.tx-project .img-card img{ display:block; width:100%; height:auto }


/* Contact Form 7 – Project page styling */
.tx-project .wpcf7 form p { margin: 0 0 10px; }
.tx-project .wpcf7 input[type="text"],
.tx-project .wpcf7 input[type="email"],
.tx-project .wpcf7 input[type="tel"],
.tx-project .wpcf7 select,
.tx-project .wpcf7 textarea {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .28s var(--ease);
}
.tx-project .wpcf7 input:focus,
.tx-project .wpcf7 select:focus,
.tx-project .wpcf7 textarea:focus {
  border-color: var(--tx-accent);
}

.tx-project .wpcf7 .row { display:flex; gap:12px; flex-wrap:wrap; }
.tx-project .wpcf7 .row > * { flex: 1 1 300px; }

.tx-project .wpcf7 input[type="submit"],
.tx-project .wpcf7 button[type="submit"] {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: .85rem 1.15rem;
  font-weight: 700;
  background: var(--ah-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(40,50,45,.18);
  transition: background .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.tx-project .wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(40,50,45,.22);
}

/* Messages */
.tx-project .wpcf7 form .wpcf7-response-output {
  margin: 12px 0 0;
  border-radius: 12px;
  border:1px solid #e2e8f0;
  padding: .75rem 1rem;
}

/* MORE OONCTACT FORM STYLING*/

/* ---- CF7 on Project page (match 2-column design) ---- */

/* Reset default paragraph spacing CF7 outputs */
.tx-project .wpcf7 form p { margin: 0 0 10px; }

/* Rows: CF7 nests fields in a <p> inside your .row wrapper */
.tx-project .wpcf7 .row > p {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /*margin: 0;*/                 /* kill extra space */
}

/* Each field wrapper (span) should flex to half width on desktop */
.tx-project .wpcf7 .row > p > span.wpcf7-form-control-wrap {
  flex: 1 1 300px;           /* two-up on desktop, stack on mobile */
  display: block;
}

/* Inputs/selects/textarea */
.tx-project .wpcf7 .wpcf7-form-control:not([type="hidden"]) {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .28s var(--ease);
  box-sizing: border-box;
}
.tx-project .wpcf7 .wpcf7-form-control:focus {
  border-color: var(--tx-accent);
}

/* Select height alignment */
/*.tx-project .wpcf7 select.wpcf7-form-control {
   height: 44px;              /* visually matches text inputs */
/*}*/

/* Hide the visible “Project Name” selector if you want it hidden */
.tx-project .wpcf7 .hidden-field-wrap { display: none !important; }

/* Submit: reuse your .cta look */
.tx-project .wpcf7 input[type="submit"].cta {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: .85rem 1.15rem;
  font-weight: 700;
  background: var(--ah-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(40,50,45,.18);
  transition: background .38s var(--ease), transform .38s var(--ease), box-shadow .38s var(--ease);
}
.tx-project .wpcf7 input[type="submit"].cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(40,50,45,.22);
}



.hidden-field-wrap {
  display: none;
}