/* stylelint-disable selector-class-pattern */

/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-idx-single.css
   Layer: IDX / Single Listing Root
   Version: 2.0

   PURPOSE
   ----------------------------------------------------------------
   Owns:
   - Single listing root tokens
   - Root alias
   - Shared shell width and spacing
   - Shared section spacing
   - Base card surface language
========================================================= */

:root{
  --jsc-idx-single-max: 1320px;
  --jsc-idx-single-page-max: 1440px;
  --jsc-idx-single-pad-inline: clamp(20px, 4vw, 48px);
  --jsc-idx-single-section-gap: 32px;

  --jsc-idx-single-radius: 28px;
  --jsc-idx-single-radius-md: 22px;
  --jsc-idx-single-radius-sm: 16px;

  --jsc-idx-single-border: rgba(18, 20, 26, 0.10);
  --jsc-idx-single-border-strong: rgba(18, 20, 26, 0.16);

  --jsc-idx-single-surface: rgba(255, 255, 255, 0.98);
  --jsc-idx-single-surface-soft: rgba(255, 255, 255, 0.78);

  --jsc-idx-single-text: var(--jsc-ink, #12141a);
  --jsc-idx-single-text-muted: var(--jsc-ink-2, #5f6472);

  --jsc-idx-single-shadow: 0 12px 32px rgba(18, 20, 26, 0.06);
  --jsc-idx-single-shadow-lg: 0 18px 44px rgba(18, 20, 26, 0.08);

  --jsc-idx-single-fast: 180ms;
  --jsc-idx-single-med: 280ms;
  --jsc-idx-single-ease: ease;
}

/* =========================================================
   1) ROOT ALIAS
========================================================= */

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
),
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) *{
  box-sizing: border-box;
  min-width: 0;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
){
  width: min(100% - 48px, var(--jsc-idx-single-max));
  margin-inline: auto;
  color: var(--jsc-idx-single-text);
  font-family: inherit;
}

/* =========================================================
   2) SHARED SECTION SPACING
========================================================= */

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) .listing-section{
  margin-top: var(--jsc-idx-single-section-gap);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) .listing-section:first-child{
  margin-top: 0;
}

/* shared surface shells */
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) .jsc-idx-single-card{
  background: var(--jsc-idx-single-surface);
  border: 1px solid var(--jsc-idx-single-border);
  border-radius: var(--jsc-idx-single-radius-md);
  box-shadow: var(--jsc-idx-single-shadow);
}


/* =========================================================
   3) RESPONSIVE
========================================================= */

@media (max-width: 1199.98px){
  :root{
    --jsc-idx-single-section-gap: 28px;
  }
}

@media (max-width: 767.98px){
  :root{
    --jsc-idx-single-section-gap: 22px;
  }

  :is(
    .jsc-idx-single-shell,
    body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
  ){
    width: min(100% - 24px, var(--jsc-idx-single-max));
  }
}

/* stylelint-enable selector-class-pattern */