/* ============================================================
   HOMES WITH JAN — LANDING PAGE BLOCKS
   Styles for custom Gutenberg blocks used on landing pages.
   Mobile-first. Uses theme custom properties exclusively.
   ============================================================ */


/* ----------------------------------------------------------
   1. HERO SECTION  (.hwj-hero)
   Full-width hero with background image, overlay, and CTA.
   ---------------------------------------------------------- */
.hwj-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
}

.hwj-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hwj-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  z-index: 1;
  /* opacity controlled via inline style on the element */
}

.hwj-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-12) var(--space-4);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.hwj-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
  display: block;
}

.hwj-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.hwj-hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.hwj-hero__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero variants */
.hwj-hero--light {
  color: var(--color-dark);
  background: var(--color-light);
}

.hwj-hero--light .hwj-hero__title {
  color: var(--color-dark);
}

.hwj-hero--light .hwj-hero__subtitle {
  color: var(--color-text-muted);
}

.hwj-hero--gradient .hwj-hero__overlay {
  background: linear-gradient(
    to top,
    rgba(45, 42, 38, 0.85) 0%,
    rgba(45, 42, 38, 0.3) 50%,
    rgba(45, 42, 38, 0.1) 100%
  );
}

@media (min-width: 768px) {
  .hwj-hero {
    min-height: 65vh;
  }
}

@media (min-width: 1024px) {
  .hwj-hero {
    min-height: 70vh;
  }

  .hwj-hero__content {
    padding: var(--space-20) var(--space-4);
  }

  .hwj-hero__title {
    font-size: var(--text-5xl);
  }
}


/* ----------------------------------------------------------
   2. FEATURE CARD  (.hwj-feature-card)
   Child block — typically placed inside a .grid wrapper.
   ---------------------------------------------------------- */
.hwj-feature-card {
  background: var(--color-light);
  border: none;
  padding: var(--space-6);
  text-align: center;
  border-radius: var(--radius-md);
}

.hwj-feature-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.hwj-feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-dark);
}

.hwj-feature-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}


/* ----------------------------------------------------------
   3. SPLIT CONTENT  (.hwj-split)
   Image + text side by side. Stacks on mobile.
   ---------------------------------------------------------- */
.hwj-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.hwj-split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.hwj-split__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
  display: block;
}

.hwj-split__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-dark);
}

.hwj-split__body {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.hwj-split__body p {
  margin-bottom: var(--space-4);
}

.hwj-split__body p:last-child {
  margin-bottom: 0;
}

/* Background variants */
.hwj-split--bg-light {
  background: var(--color-light);
}

.hwj-split--bg-warm {
  background: var(--color-neutral);
}

@media (min-width: 768px) {
  .hwj-split__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .hwj-split--img-right .hwj-split__media {
    order: 2;
  }

  .hwj-split__title {
    font-size: var(--text-3xl);
  }
}


/* ----------------------------------------------------------
   4. TESTIMONIAL  (.hwj-testimonial)
   Client testimonial with quote, photo, and attribution.
   ---------------------------------------------------------- */
.hwj-testimonial__quote {
  text-align: center;
  border: none;
  padding: 0;
  margin: 0;
}

.hwj-testimonial__quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.hwj-testimonial__quote p {
  font-family: var(--font-heading-italic);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
}

.hwj-testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.hwj-testimonial__photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.hwj-testimonial__name {
  font-style: normal;
  font-weight: 600;
  display: block;
  color: var(--color-dark);
}

.hwj-testimonial__detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Testimonial — card variant */
.hwj-testimonial--card .hwj-testimonial__quote {
  background: var(--color-white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Testimonial — highlight variant */
.hwj-testimonial--highlight .hwj-testimonial__quote {
  border-left: 4px solid var(--color-gold);
  padding-left: var(--space-6);
  text-align: left;
}

.hwj-testimonial--highlight .hwj-testimonial__quote::before {
  text-align: left;
}

.hwj-testimonial--highlight .hwj-testimonial__attribution {
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .hwj-testimonial__quote p {
    font-size: var(--text-2xl);
  }
}


/* ----------------------------------------------------------
   5. STATS ROW  (.hwj-stats)
   Numeric highlights displayed in a row.
   ---------------------------------------------------------- */
.hwj-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}

.hwj-stats__item {
  padding: var(--space-4);
}

.hwj-stats__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  line-height: 1.2;
}

.hwj-stats__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-2);
}

/* Stats — background variants */
.hwj-stats--bg-light {
  background: var(--color-light);
}

.hwj-stats--bg-dark {
  background: var(--color-dark);
}

.hwj-stats--bg-dark .hwj-stats__value {
  color: var(--color-gold);
}

.hwj-stats--bg-dark .hwj-stats__label {
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
  .hwj-stats__grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (min-width: 1024px) {
  .hwj-stats__value {
    font-size: var(--text-4xl);
  }
}


/* ----------------------------------------------------------
   6. LOGO ROW  (.hwj-logos)
   Row of partner / press / brand logos.
   ---------------------------------------------------------- */
.hwj-logos__heading {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
}

.hwj-logos__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.hwj-logos__item img {
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Logo size variants */
.hwj-logos--small .hwj-logos__item img {
  max-height: 32px;
}

.hwj-logos--medium .hwj-logos__item img {
  max-height: 48px;
}

.hwj-logos--large .hwj-logos__item img {
  max-height: 72px;
}

/* Grayscale variant */
.hwj-logos--grayscale .hwj-logos__item img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.hwj-logos--grayscale .hwj-logos__item img:hover {
  filter: grayscale(0);
  opacity: 1;
}


/* ----------------------------------------------------------
   7. LANDING PAGE TEMPLATE  (.landing-page)
   Full-width: custom blocks go edge-to-edge.
   Native Gutenberg blocks get contained + prose-like styling.
   ---------------------------------------------------------- */

/* First hero flush against header */
.landing-page > .hwj-hero:first-child {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
}

/* --- Native Gutenberg blocks: contain and style ---
   Custom hwj blocks handle their own .container width.
   Everything else (headings, paragraphs, lists, images,
   separators, etc.) needs a max-width + centering + spacing. */

.landing-page > :where(
  h1, h2, h3, h4, h5, h6,
  p,
  ul, ol,
  blockquote,
  figure,
  .wp-block-image,
  .wp-block-quote,
  .wp-block-list,
  .wp-block-table,
  .wp-block-code,
  .wp-block-preformatted,
  .wp-block-verse,
  .wp-block-pullquote,
  .wp-block-columns,
  .wp-block-group,
  .wp-block-details,
  .wp-block-buttons,
  .wp-block-embed,
  .wp-block-video,
  .wp-block-audio,
  .wp-block-file,
  .wp-block-cover
) {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Typography for native blocks on landing pages */
.landing-page > h1,
.landing-page > h2,
.landing-page > h3,
.landing-page > h4 {
  font-family: var(--font-heading);
  color: var(--color-dark);
}

.landing-page > h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.landing-page > h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.landing-page > p {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.landing-page > ul,
.landing-page > ol {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.landing-page > ul { list-style: disc; padding-left: var(--space-6); }
.landing-page > ol { list-style: decimal; padding-left: var(--space-6); }
.landing-page > li { margin-bottom: var(--space-2); }

.landing-page > a:not(.btn) {
  color: var(--color-gold);
  text-decoration: underline;
}

.landing-page > blockquote,
.landing-page > .wp-block-quote {
  border-left: 4px solid var(--color-gold);
  padding-left: var(--space-6);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.landing-page > .wp-block-image {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.landing-page > .wp-block-image img {
  border-radius: var(--radius-md);
}

/* Details / Accordion (native wp-block-details) */
.landing-page > .wp-block-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

/* Collapse gap between consecutive details blocks */
.landing-page > .wp-block-details + .wp-block-details {
  margin-top: calc(-1 * var(--space-3));
}

/* First details after a non-details element gets top margin */
.landing-page > :not(.wp-block-details) + .wp-block-details {
  margin-top: var(--space-4);
}

.landing-page > .wp-block-details summary {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  color: var(--color-dark);
}

.landing-page > .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.landing-page > .wp-block-details summary::marker {
  display: none;
  content: '';
}

.landing-page > .wp-block-details summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.landing-page > .wp-block-details[open] summary::after {
  content: '\2013';
}

.landing-page > .wp-block-details summary:hover {
  background: var(--color-bg);
}

.landing-page > .wp-block-details p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
  max-width: none;
}

/* Also style details inside .prose (default template) */
.prose .wp-block-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.prose .wp-block-details summary {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
  color: var(--color-dark);
}

.prose .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.prose .wp-block-details summary::marker {
  display: none;
  content: '';
}

.prose .wp-block-details summary::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.prose .wp-block-details[open] summary::after {
  content: '\2013';
}

.prose .wp-block-details summary:hover {
  background: var(--color-bg);
}

.prose .wp-block-details p {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* Separator */
.landing-page > .wp-block-separator {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* Buttons block */
.landing-page > .wp-block-buttons {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Wider blocks (columns, group, cover) get more room */
.landing-page > :where(
  .wp-block-columns,
  .wp-block-group,
  .wp-block-cover
) {
  max-width: var(--container-max);
}

/* Spacing between adjacent custom blocks */
.landing-page > [class*="hwj-"] + [class*="hwj-"],
.landing-page > .cta-band + .cta-band,
.landing-page > section + section {
  /* Custom blocks handle their own section padding — no extra gap */
}

/* Spacing: native blocks next to custom blocks */
.landing-page > :where(h1, h2, h3, h4, p, ul, ol, blockquote, figure,
  .wp-block-separator, .wp-block-image, .wp-block-buttons):first-child {
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  .landing-page > :where(
    h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure,
    .wp-block-image, .wp-block-quote, .wp-block-list, .wp-block-table,
    .wp-block-code, .wp-block-preformatted, .wp-block-verse,
    .wp-block-pullquote, .wp-block-columns, .wp-block-group,
    .wp-block-details, .wp-block-buttons, .wp-block-embed,
    .wp-block-video, .wp-block-audio, .wp-block-file, .wp-block-cover
  ) {
    padding-left: 0;
    padding-right: 0;
  }
}


/* ----------------------------------------------------------
   8. DEFAULT TEMPLATE OVERRIDES  (.prose)
   When landing blocks are used inside the narrow .prose
   wrapper on page.php, adapt gracefully.
   ---------------------------------------------------------- */

/* --- Link color fix: .prose forces gold underlined links,
       but block buttons and CTAs should keep their own styles --- */
.prose .btn {
  color: inherit;
  text-decoration: none;
}

.prose .btn--primary {
  color: var(--color-white);
}

.prose .btn--outline {
  color: var(--color-dark);
}

.prose .btn--outline-light {
  color: var(--color-white);
}

.prose .btn--ghost {
  color: var(--color-gold);
  text-decoration: none;
}

.prose .cta-band a,
.prose .hwj-hero a,
.prose .hwj-feature-card a,
.prose .hwj-split a,
.prose .hwj-testimonial a {
  text-decoration: none;
}

/* --- Rounded corners for full-bleed blocks in narrow context --- */
.prose .hwj-hero {
  border-radius: var(--radius-lg);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}

.prose .hwj-split--bg-light,
.prose .hwj-split--bg-warm {
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}

.prose .hwj-stats {
  border-radius: var(--radius-lg);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}

.prose .cta-band {
  border-radius: var(--radius-lg);
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
}

.prose .hwj-testimonial--card .hwj-testimonial__quote {
  /* Already has rounded corners from variant style */
}

/* --- Column grid fix: cap at 2 columns inside narrow container --- */
.prose .grid--3,
.prose .grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  /* Slightly widen the breakout so blocks breathe */
  .prose .hwj-hero,
  .prose .hwj-split--bg-light,
  .prose .hwj-split--bg-warm,
  .prose .hwj-stats,
  .prose .cta-band {
    margin-left: calc(-1 * var(--space-8));
    margin-right: calc(-1 * var(--space-8));
  }
}


/* ----------------------------------------------------------
   9. EDITOR OVERRIDES
   Minimal styles so blocks render reasonably in the editor.
   ---------------------------------------------------------- */
[data-type="hwj/hero-section"] .hwj-hero {
  min-height: 300px;
}

[data-type="hwj/hero-section"] .hwj-hero__bg {
  pointer-events: none;
}

[data-type="hwj/feature-cards"] .grid {
  display: grid;
}

[data-type="hwj/split-content"] .hwj-split__media img {
  max-height: 400px;
}

[data-type="hwj/testimonial"] .hwj-testimonial__photo {
  pointer-events: none;
}