/* =========================================================
   SMALL TOWN MAHJ — FINAL DESKTOP HOMEPAGE ART DIRECTION
   Desktop only. Mobile/tablet remain owned by the approved existing rules.
   ========================================================= */

@media (min-width: 981px) {
  /* The decorative rails are one mirrored pair, never two unrelated strips. */
  body:has(.home-photo-hero) .mat-edge--right {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
  }

  /* -------------------------------------------------------
     HERO
     Photography remains dominant but its desktop height is bounded so the
     card stack no longer becomes a nearly 1,000px-tall portrait object.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1540px, calc(100% - clamp(44px, 4vw, 72px))) !important;
    margin-inline: auto !important;
    padding: clamp(2.2rem, 3.2vh, 2.9rem) 0 clamp(2.45rem, 3.8vh, 3.35rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: clamp(500px, calc(100vh - 170px), 620px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 8 !important;
    grid-column: 1 / 7 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1rem clamp(2rem, 3vw, 3.8rem) 1rem clamp(2.2rem, 4vw, 4.8rem) !important;
    transform: translateY(-.35rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    position: absolute;
    z-index: -1;
    inset: -2rem -9rem -2rem -1.2rem;
    display: block !important;
    content: '';
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255,250,241,.995) 0%,
      rgba(255,250,241,.985) 54%,
      rgba(255,250,241,.90) 67%,
      rgba(255,250,241,.52) 80%,
      rgba(255,250,241,0) 100%
    );
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.25em !important;
    margin: 0 !important;
    color: #082f67 !important;
    font-size: clamp(4rem, 5.2vw, 6.1rem) !important;
    line-height: .9 !important;
    letter-spacing: -.041em !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    margin-top: clamp(1.8rem, 2.5vw, 2.45rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 4 !important;
    grid-column: 5 / 13 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 980px !important;
    height: clamp(540px, 69vh, 690px) !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero__stack {
    inset: 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(94%, 780px) !important;
    height: clamp(520px, 66vh, 660px) !important;
    aspect-ratio: auto !important;
    border-width: 8px !important;
    border-bottom-width: 36px !important;
    border-radius: 10px !important;
    box-shadow:
      0 24px 54px rgba(15,45,83,.18),
      0 4px 0 rgba(23,75,143,.07) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    bottom: 27px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    bottom: 8px !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge {
    display: grid !important;
    width: min(1380px, calc(100% - clamp(64px, 7vw, 112px))) !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    margin: 0 auto !important;
    border-top: 1px solid rgba(23,75,143,.17) !important;
    border-bottom: 0 !important;
    padding: 1.05rem 0 0 !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 4 / 10 !important;
    max-width: 44rem !important;
    font-size: clamp(1rem, 1.05vw, 1.1rem) !important;
    line-height: 1.58 !important;
  }

  /* -------------------------------------------------------
     ABOUT BRIEF
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-about-brief {
    width: min(1280px, calc(100% - clamp(72px, 8vw, 128px))) !important;
    padding: clamp(4.8rem, 6.2vw, 6.4rem) 0 !important;
  }

  body:has(.home-photo-hero) .home-about-brief__inner {
    display: grid !important;
    max-width: none !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    column-gap: clamp(1.25rem, 2.2vw, 2.5rem) !important;
    align-items: start !important;
  }

  body:has(.home-photo-hero) .home-about-brief__eyebrow {
    grid-column: 1 / 6 !important;
    margin-bottom: 1rem !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    grid-column: 1 / 7 !important;
    max-width: 8.2em !important;
    margin: 0 !important;
    font-size: clamp(3.1rem, 4.1vw, 4.75rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief p:not(.home-about-brief__eyebrow) {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 3 !important;
    max-width: 35rem !important;
    margin-top: 1.45rem !important;
    font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief__link {
    grid-column: 8 / 13 !important;
    justify-self: start !important;
    margin-top: 1.35rem !important;
  }

  /* -------------------------------------------------------
     CONTENT FIELD — architectural Mahjong objects, not card rows.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-tile-flow {
    width: min(1280px, calc(100% - clamp(72px, 8vw, 128px))) !important;
    padding-bottom: clamp(5rem, 7vw, 7rem) !important;
  }

  body:has(.home-photo-hero) .home-piece + .home-piece {
    margin-top: clamp(5.8rem, 7.5vw, 8rem) !important;
  }

  body:has(.home-photo-hero) .content-tile,
  body:has(.home-photo-hero) .mahjong-step {
    border-radius: 15px !important;
    box-shadow:
      0 5px 0 rgba(183,169,148,.72),
      0 15px 36px rgba(18,54,94,.09),
      inset 0 0 0 4px rgba(255,255,255,.3) !important;
  }

  body:has(.home-photo-hero) .content-tile {
    border: 1px solid rgba(23,75,143,.2) !important;
    padding: clamp(2rem, 3vw, 3.1rem) !important;
  }

  body:has(.home-photo-hero) .content-tile::before {
    display: block !important;
    inset: 7px !important;
    border: 1px solid rgba(23,75,143,.11) !important;
    border-radius: 9px !important;
  }

  body:has(.home-photo-hero) .content-tile--porcelain {
    background: linear-gradient(145deg,#fffdf8 0%,#fff9ee 62%,#f4ecdf 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile--soft-blue {
    background: linear-gradient(145deg,#edf4fb 0%,#dfeaf6 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile--sage {
    background: linear-gradient(145deg,#eef2ea 0%,#dfe7d7 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile h2,
  body:has(.home-photo-hero) .field-heading h2,
  body:has(.home-photo-hero) .field-heading--centered h2 {
    font-size: clamp(2.9rem, 3.9vw, 4.6rem) !important;
    line-height: .95 !important;
  }

  body:has(.home-photo-hero) .content-tile h3 {
    font-size: clamp(2rem, 2.4vw, 2.8rem) !important;
  }

  body:has(.home-photo-hero) .content-tile > p:not(.tile-kicker) {
    max-width: 38rem !important;
    font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement {
    width: min(980px, 80%) !important;
    margin: 0 0 0 3% !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement h2,
  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement > p:not(.tile-kicker) {
    margin-inline: 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings {
    padding-bottom: 4.4rem !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings .field-heading {
    width: min(760px, 66%) !important;
    margin: 0 0 2.8rem 4% !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    gap: clamp(1.1rem, 1.7vw, 1.7rem) !important;
    margin: 0 !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left {
    grid-column: 1 / 5 !important;
    width: 100% !important;
    transform: translateY(0) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-right {
    grid-column: 5 / 9 !important;
    width: 100% !important;
    transform: translateY(4.2rem) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left-wide {
    grid-column: 9 / 13 !important;
    width: 100% !important;
    transform: translateY(1.35rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading {
    width: min(720px, 60%) !important;
    margin: 0 4% 3rem auto !important;
    text-align: right !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading h2 {
    margin-left: auto !important;
  }

  body:has(.home-photo-hero) .step-piece-stack {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    gap: clamp(1.1rem, 1.7vw, 1.7rem) !important;
    margin: 0 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step {
    width: 100% !important;
    min-height: 154px !important;
    grid-template-columns: 52px 1fr !important;
    padding: 1.45rem !important;
    background: linear-gradient(180deg,#fffdf8 0%,#f7f0e5 100%) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1) {
    grid-column: 1 / 5 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2) {
    grid-column: 5 / 9 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: 9 / 13 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .mahjong-step__number {
    width: 46px !important;
    aspect-ratio: 1 !important;
    border: 1px solid rgba(23,75,143,.18) !important;
    border-radius: 8px !important;
    background: #edf4fb !important;
    font-family: var(--serif) !important;
    font-size: 1.25rem !important;
    letter-spacing: 0 !important;
  }

  body:has(.home-photo-hero) .mahjong-step::before {
    display: block !important;
    inset: 6px !important;
    border: 1px solid rgba(23,75,143,.1) !important;
    border-radius: 9px !important;
  }

  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance {
    width: min(860px, 70%) !important;
    margin: 0 3% 0 auto !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance > p:not(.tile-kicker) {
    margin-inline: 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    display: grid !important;
    width: min(1080px, 86%) !important;
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr) !important;
    align-items: start !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
    margin: 0 auto 0 2% !important;
  }

  body:has(.home-photo-hero) .home-piece--included .ledger-heading {
    max-width: 30rem !important;
    margin: 0 !important;
    padding-top: .35rem !important;
  }

  body:has(.home-photo-hero) .home-piece--included .porcelain-ledger li {
    grid-template-columns: 28px minmax(120px,.72fr) 1fr !important;
    gap: .75rem !important;
    padding: .9rem 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(900px, 70%) !important;
    margin-inline: auto !important;
    padding-block: clamp(2.5rem, 4vw, 3.5rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff {
    margin-top: clamp(4.5rem, 6vw, 6rem) !important;
    color: #174b8f !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff p {
    font-size: 1.05rem !important;
  }
}

/* Wide desktop: increase the physical relationship between copy and photo
   instead of letting the composition drift back into two separate columns. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1600px, calc(100% - 56px)) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: clamp(4.8rem, 5vw, 6rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    right: -12rem !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 4 / 13 !important;
    max-width: 1080px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 49% !important;
    width: min(94%, 840px) !important;
    height: clamp(570px, 65vh, 680px) !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 5 / 11 !important;
  }
}

/* Compact desktop/laptop band. This is deliberately not tablet styling:
   approved <=980px behavior remains untouched. The goal is simply to stop
   1024-class screens from inheriting three cramped wide-desktop card rows. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: calc(100% - 32px) !important;
    padding-top: 1.9rem !important;
    padding-bottom: 2.35rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: 520px !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: 1.75rem !important;
    padding-right: 1.6rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    inset: -1.6rem -6rem -1.6rem -.7rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.5rem, 5.6vw, 4.35rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    height: 520px !important;
    min-height: 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(93%, 560px) !important;
    height: 500px !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge {
    width: calc(100% - 48px) !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 3 / 11 !important;
  }

  body:has(.home-photo-hero) .home-about-brief,
  body:has(.home-photo-hero) .home-tile-flow {
    width: calc(100% - 64px) !important;
  }

  body:has(.home-photo-hero) .home-about-brief {
    padding: 4.5rem 0 !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    font-size: clamp(2.75rem, 4.3vw, 3.7rem) !important;
  }

  body:has(.home-photo-hero) .home-piece + .home-piece {
    margin-top: 5.5rem !important;
  }

  body:has(.home-photo-hero) .content-tile {
    padding: 1.65rem !important;
  }

  body:has(.home-photo-hero) .content-tile h2,
  body:has(.home-photo-hero) .field-heading h2,
  body:has(.home-photo-hero) .field-heading--centered h2 {
    font-size: clamp(2.5rem, 3.9vw, 3.45rem) !important;
  }

  body:has(.home-photo-hero) .content-tile h3 {
    font-size: clamp(1.65rem, 2.3vw, 2.1rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement,
  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance,
  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(90%, 820px) !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings {
    padding-bottom: 5.5rem !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings .field-heading {
    width: min(760px, 80%) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack,
  body:has(.home-photo-hero) .step-piece-stack {
    gap: 1rem !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left {
    grid-column: 1 / 7 !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-right {
    grid-column: 7 / 13 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left-wide {
    grid-column: 4 / 10 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading {
    width: min(720px, 78%) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1) {
    grid-column: 1 / 7 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2) {
    grid-column: 7 / 13 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: 4 / 10 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    width: min(92%, 880px) !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-inline: auto !important;
  }

  body:has(.home-photo-hero) .home-piece--included .porcelain-ledger li {
    grid-template-columns: 28px minmax(120px,.72fr) 1fr !important;
  }
}