/* Homepage framing refinement.
   The decorative Chinoiserie/Talavera rails belong only to the inner
   content field. Header, photo hero, and footer remain visually open. */

body:has(.home-photo-hero) {
  padding-inline: 0 !important;
}

body:has(.home-photo-hero) > .mat-edge-frame {
  display: none !important;
}

body:has(.home-photo-hero) .site-header.mat-header,
body:has(.home-photo-hero) .site-header.mat-header[data-scrolled] {
  right: 0 !important;
  left: 0 !important;
}

body:has(.home-photo-hero) > .tabletop-shell {
  width: 100% !important;
}

.home-framed-content {
  --home-inner-rail: var(--site-side-frame);
  position: relative;
  isolation: isolate;
  width: 100%;
  padding-inline: var(--home-inner-rail);
  box-sizing: border-box;
  background: var(--site-paper);
}

.home-framed-content::before,
.home-framed-content::after {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: var(--home-inner-rail);
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  background-color: var(--mat-porcelain-ivory);
  background-image: var(--mat-frame-art);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--mat-frame-art-size);
}

.home-framed-content::before {
  left: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
}

/* The artwork is mirrored on the right. Define the rule on the outer edge
   before mirroring so it lands on the INNER edge after scaleX(-1). */
.home-framed-content::after {
  right: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
  border-left: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.home-framed-content > * {
  position: relative;
  z-index: 5;
}

/* Let the framed field begin with content rather than a large ivory gap. */
.home-framed-content > .home-about-brief {
  padding-top: clamp(2rem, 3.5vw, 3rem) !important;
  border-bottom: 0 !important;
}

/* Custom Mahjong artwork supplied for the brand. Keep each divider compact
   and give every section transition the same visual breathing room. */
.home-mahjong-divider {
  position: relative;
  z-index: 5;
  width: min(260px, 31vw);
  margin: clamp(2.9rem, 5vw, 4.6rem) auto;
  line-height: 0;
  pointer-events: none;
}

.home-mahjong-divider img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* The first transition uses the same spacing as every other section break. */
.home-framed-content > .home-about-brief + .home-mahjong-divider {
  margin-top: clamp(2.9rem, 5vw, 4.6rem);
  margin-bottom: clamp(2.9rem, 5vw, 4.6rem);
}

.home-framed-content > .home-mahjong-divider + .home-tile-flow {
  padding-top: 0 !important;
}

.home-tile-flow > .home-piece,
.home-tile-flow > .home-mahjong-divider {
  position: relative;
  z-index: 5;
}

.home-tile-flow > .home-piece + .home-mahjong-divider {
  margin-top: clamp(2.9rem, 5vw, 4.6rem);
  margin-bottom: clamp(2.9rem, 5vw, 4.6rem);
}

.home-tile-flow > .home-mahjong-divider + .home-piece {
  margin-top: 0 !important;
}

body:has(.home-photo-hero) .site-footer {
  position: relative;
  z-index: 6;
  width: 100% !important;
  margin-inline: 0 !important;
}

@media (max-width: 980px) {
  .home-framed-content > .home-about-brief {
    padding-top: 1.75rem !important;
  }

  .home-mahjong-divider {
    width: min(215px, 35vw);
    margin-block: 2.9rem;
  }

  .home-framed-content > .home-about-brief + .home-mahjong-divider,
  .home-tile-flow > .home-piece + .home-mahjong-divider {
    margin-top: 2.9rem;
    margin-bottom: 2.9rem;
  }
}

@media (max-width: 680px) {
  .home-framed-content {
    --home-inner-rail: 18px;
  }

  .home-framed-content > .home-about-brief {
    padding-top: 1.25rem !important;
    padding-bottom: 2.1rem !important;
  }

  .home-mahjong-divider {
    width: min(165px, 39vw);
    margin-block: 2.5rem;
  }

  .home-framed-content > .home-about-brief + .home-mahjong-divider,
  .home-tile-flow > .home-piece + .home-mahjong-divider {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}