/* Grass365 Interior — loaded by the grass365_interior page layout.
   Brand tokens come from grass365_landing.css. This file styles the
   header and the imported WordPress HTML (hero, copy, galleries, cards). */

body.g365-interior {
  background: #fff;
}

body.g365-interior .g365-landing-footer-content,
body.g365-interior .g365-site-footer,
body.g365-interior .g365-copyright-bar {
  /* landing footer styles already apply via body.g365-landing */
}

.g365-interior-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 8px 24px rgba(22, 35, 26, 0.12);
}

/* Franchisee interiors stack the corporate utility row on the local nav. */
body.g365-interior .g365-interior-header .g365-corp-utility {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.g365-interior-nav {
  background: var(--g365-deep) !important;
  padding: 0.65rem 0;
}

.g365-interior-logo {
  max-height: 44px;
  width: auto;
}

.g365-interior-brand-name {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-size: 1.05rem;
}

.g365-interior-nav .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
}

.g365-interior-nav .nav-link:hover,
.g365-interior-nav .nav-link.active,
.g365-interior-nav .nav-link:focus {
  color: #fff !important;
}

.g365-interior-cta {
  --bs-btn-bg: var(--g365-orange);
  --bs-btn-border-color: var(--g365-orange);
  --bs-btn-hover-bg: var(--g365-orange-dark);
  --bs-btn-hover-border-color: var(--g365-orange-dark);
  font-weight: 700;
}

.g365-interior-main {
  background: #fff;
}

.g365-interior-body {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 3.5rem;
}

.g365-interior-body img {
  max-width: 100%;
  height: auto;
}

/* Full-bleed only when the first block is an image hero, not the article. */
.g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 2rem;
}

.g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) img {
  display: block;
  width: 100%;
  height: min(62vh, 560px);
  object-fit: cover;
}

.g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) span:empty,
.g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) p:empty,
.g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) div:not(:has(img)) {
  display: none;
}

.g365-interior-body h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--g365-dark);
  margin: 0 0 0.85rem;
}

.g365-interior-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  margin: 2.25rem 0 1rem;
}

.g365-interior-body h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g365-dark);
  margin: 2rem 0 0.75rem;
}

.g365-interior-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--g365-green);
  margin: 0 0 0.4rem;
}

.g365-interior-body p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #2a3328;
  max-width: 46rem;
}

.g365-interior-body a:not(.btn) {
  color: var(--g365-green);
  font-weight: 600;
}

/* Interior link color must not paint over filled buttons (green-on-green). */
.g365-interior-body a.btn,
.g365-interior-body .btn {
  color: #fff !important;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* City / region directory pills — keep them smaller than section headings. */
.g365-interior-body h2 + div > div a.btn,
.g365-interior-body h3 + p a.btn,
.g365-interior-body h3 + div a.btn {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.4rem 0.95rem;
}

.g365-interior-body h2 + div > div > :is(h1, h2, .display-4, .display-5, .display-6) {
  font-size: 1.2rem;
}

/* Owner card city/state under the name. */
.g365-interior-body figure + p + p {
  font-size: 0.95rem;
  font-weight: 400;
  color: #5c6758;
  max-width: none;
}

.g365-interior-body hr {
  border: 0;
  border-top: 1px solid #dde5da;
  margin: 2.25rem 0;
  opacity: 1;
}

.g365-interior-body figure {
  margin: 0 0 1.25rem;
}

.g365-interior-body figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(22, 35, 26, 0.08);
}

.g365-interior-gallery,
.g365-interior-body div:has(> figure:nth-of-type(2)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2.25rem 0 0.5rem;
}

.g365-interior-gallery figure,
.g365-interior-body div:has(> figure:nth-of-type(2)) > figure {
  margin: 0;
}

/* “Popular installations” and similar card rows: figure + heading + copy + Explore. */
.g365-interior-body h2 + div > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.g365-interior-body h2 + div > div > div:has(h3) {
  background: #fff;
  border: 1px solid #dde5da;
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 1.15rem;
  box-shadow: 0 10px 28px rgba(22, 35, 26, 0.06);
}

.g365-interior-body h2 + div > div > div:has(h3) figure {
  margin: 0 0 0.75rem;
}

.g365-interior-body h2 + div > div > div:has(h3) figure img {
  border-radius: 0;
  aspect-ratio: 16 / 9;
}

.g365-interior-body h2 + div > div > div:has(h3) h3,
.g365-interior-body h2 + div > div > div:has(h3) p {
  padding: 0 1.1rem;
}

.g365-interior-body h2 + div > div > div:has(h3) p {
  font-size: 1rem;
  max-width: none;
}

.g365-interior-body h3 + p + div a,
.g365-interior-body h4 + p + div a {
  display: inline-flex;
  align-items: center;
  margin: 0.25rem 1.1rem 0;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: var(--g365-orange);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
}

.g365-interior-body h3 + p + div a:hover,
.g365-interior-body h4 + p + div a:hover {
  background: var(--g365-orange-dark);
}

/* Scraped owner card + financing/FAQ CTAs belong in the landing footer. */
.g365-interior-body #contact-us,
.g365-interior-body [id="contact-us"] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .g365-interior-body {
    padding: 1.5rem 1rem 2.5rem;
  }

  .g365-interior-body > div:first-child:has(img):not(:has(h1, h2, h3, h4)) img {
    height: min(46vh, 360px);
  }

  .g365-interior-gallery,
  .g365-interior-body div:has(> figure:nth-of-type(2)) {
    grid-template-columns: 1fr;
  }
}