/* Harmony Healing Center — V8.3.5 Media Approved Mockup
   Pixel-direction baseline: confirmed Media Spotlight mockup.
   Core rule: ONE natural wood frame only. No frame-inside-frame effect.
   EN/AR markup and destinations remain semantic/clickable HTML.
*/

.home46m-media{
  --m35-ink:#0b4650;
  --m35-teal:#0a9298;
  --m35-copper:#b77a4d;
  --m35-wall:#faf7f3;
  --m35-floor:#f0e9e1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--m35-ink);
  background:#faf8f5;
  min-height:clamp(800px,61vw,1010px);
  padding:clamp(76px,6.2vw,108px) 0 clamp(150px,10vw,190px);
  border-block:1px solid rgba(154,117,87,.08);
  box-shadow:
    0 -22px 50px rgba(21,55,60,.055),
    0 24px 54px rgba(75,52,35,.07),
    inset 0 1px 0 rgba(255,255,255,.96);
}
.home46m-media *{box-sizing:border-box}

/* 3D white room: flat wall + baseboard + marble floor, no window, no busy decoration. */
.home46m-room{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.76) 31%,transparent 58%),
    linear-gradient(180deg,#fbf8f5 0%,#f9f6f2 72.8%,#e0d7ce 73%,#f4eee7 76%,#eee7df 100%);
  box-shadow:
    inset 0 28px 55px rgba(255,255,255,.85),
    inset 0 -30px 58px rgba(85,61,43,.045);
}
.home46m-room::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(105,84,66,.018),transparent 11%,transparent 89%,rgba(105,84,66,.018)),
    radial-gradient(ellipse at 50% 27%,rgba(255,255,255,.7),transparent 61%);
}
.home46m-room::after{
  content:"";
  position:absolute;
  left:0;right:0;top:76%;bottom:0;
  background:
    linear-gradient(105deg,transparent 0 18%,rgba(155,139,126,.085) 19%,transparent 20% 48%,rgba(166,150,137,.07) 49%,transparent 50% 73%,rgba(151,135,121,.07) 74%,transparent 75%),
    linear-gradient(75deg,transparent 0 29%,rgba(161,145,132,.065) 30%,transparent 31% 61%,rgba(146,129,115,.06) 62%,transparent 63%),
    linear-gradient(180deg,#f7f1ea 0%,#eee7df 52%,#f8f3ed 100%);
  border-top:1px solid rgba(127,104,86,.12);
  box-shadow:inset 0 14px 28px rgba(69,49,35,.025);
}
.home46m-baseboard{
  position:absolute;
  left:5.5%;right:5.5%;top:72.65%;height:12px;
  z-index:2;
  background:linear-gradient(180deg,#fffefa 0 28%,rgba(204,193,182,.64) 29% 42%,#f8f4ee 43% 100%);
  box-shadow:0 8px 17px rgba(72,51,36,.05);
}

/* Three soft ceiling cones aligned with the three approved frames. */
.home46m-light{
  position:absolute;
  top:-2.5%;
  width:20%;
  height:43%;
  z-index:1;
  opacity:.62;
  pointer-events:none;
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,252,247,.58) 31%,rgba(255,255,255,.1) 73%,transparent 100%);
  filter:blur(7px);
}
.home46m-light::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:24px;height:9px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 18px rgba(255,249,237,.95);
}
.home46m-light--one{left:15%}
.home46m-light--two{left:40%}
.home46m-light--three{right:15%}

/* Side plants are decorative only and remain at the far edges, as in the mockup. */
.home46m-media::before,
.home46m-media::after{
  content:"";
  position:absolute;
  bottom:clamp(92px,6.6vw,126px);
  width:clamp(130px,10.6vw,176px);
  height:clamp(500px,48vw,695px);
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100% auto;
  filter:drop-shadow(0 12px 18px rgba(62,46,34,.05));
}
.home46m-media::before{
  left:0;
  background-image:url('/assets/home-v8/v8035/media-plant-left.webp');
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,rgba(0,0,0,.68) 90%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 78%,rgba(0,0,0,.68) 90%,transparent 100%);
}
.home46m-media::after{
  right:0;
  background-image:url('/assets/home-v8/v8035/media-plant-right.webp');
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 78%,rgba(0,0,0,.68) 90%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,#000 78%,rgba(0,0,0,.68) 90%,transparent 100%);
}

.home46m-shell{
  position:relative;
  z-index:3;
  width:100%;
  margin:0 auto;
  padding:0 clamp(16px,2.7vw,42px);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.home46m-shell::before,.home46m-shell::after{content:none!important}

.home46m-head{
  max-width:1010px;
  margin:0 auto clamp(44px,4vw,62px);
  padding:0 12px;
  text-align:center;
}
.home46m-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px 30px;
  border:1px solid rgba(167,105,64,.58);
  border-radius:999px;
  background:rgba(255,255,255,.8);
  color:#9b6139;
  font-size:clamp(11px,.76vw,14px);
  font-weight:900;
  letter-spacing:.21em;
  box-shadow:0 8px 18px rgba(84,58,39,.035);
}
.home46m-head h2{
  margin:12px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(45px,3.45vw,64px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.038em;
  color:var(--m35-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.98),0 8px 16px rgba(18,53,57,.045);
}
.home46m-head h2 span,.home46m-head h2 em{display:block}
.home46m-head h2 span{white-space:nowrap}
.home46m-head h2 em{
  margin-top:2px;
  color:var(--m35-teal);
  font-weight:500;
  font-style:italic;
}
.home46m-head p{
  max-width:760px;
  margin:20px auto 0;
  color:#6c7b80;
  font-size:clamp(14px,1vw,17px);
  line-height:1.52;
  text-wrap:balance;
}
.home46m-head::after{
  content:"";
  display:block;
  width:58px;
  height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--m35-copper) 18%,var(--m35-copper) 82%,transparent);
}

/* Geometry copied from the confirmed mockup ratios:
   left frame 1.074x center, right frame 1.036x center. */
.home46m-gallery{
  position:relative;
  display:grid;
  grid-template-columns:1.074fr 1fr 1.036fr;
  align-items:end;
  gap:clamp(28px,2.35vw,40px);
  width:min(78.2vw,1180px);
  max-width:calc(100vw - 250px);
  margin:0 auto;
  padding-bottom:6px;
}
.home46m-gallery::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-3%;right:-3%;bottom:-10px;height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(72,51,36,.11) 0%,rgba(72,51,36,.045) 47%,transparent 77%);
  filter:blur(9px);
}
.home46m-gallery::after{content:none!important}

.home46m-item{min-width:0;position:relative;perspective:1200px}
.home46m-frame-link{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
  outline:none;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  transition:transform .24s ease,filter .24s ease;
}
.home46m-frame-link:hover{
  transform:translateY(-5px);
  filter:drop-shadow(0 14px 14px rgba(61,44,31,.09));
}
.home46m-frame-link:focus-visible{
  outline:3px solid rgba(0,151,160,.30);
  outline-offset:7px;
  border-radius:4px;
}

/* EXACTLY ONE visible wood frame. The approved crops already include the ivory inner mat.
   This deliberately removes the former .frame + .mat + framed-image nesting. */
.home46m-frame{
  display:block;
  padding:clamp(11px,.82vw,14px);
  border-radius:1px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.10),transparent 14%,rgba(76,47,27,.04) 27%,transparent 42%,rgba(255,255,255,.10) 57%,transparent 70%,rgba(73,44,25,.045) 84%,transparent),
    linear-gradient(135deg,#d4a677 0%,#b77b49 17%,#d3a273 35%,#a66c40 51%,#d1a070 70%,#b57846 87%,#ddb082 100%);
  box-shadow:
    inset 0 0 0 1px rgba(76,45,25,.29),
    inset 0 0 0 3px rgba(255,235,211,.12),
    0 15px 24px rgba(62,44,31,.12),
    0 2px 3px rgba(62,44,31,.08);
}
.home46m-mat{
  display:block;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.home46m-image-viewport{
  display:block;
  position:relative;
  overflow:hidden;
  background:#fffdfa;
  isolation:isolate;
}
.home46m-image-viewport::after{content:none!important}
.home46m-image-viewport img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  transform:none!important;
  transition:transform .3s ease;
}
.home46m-item--event .home46m-image-viewport,
.home46m-item--sayidaty .home46m-image-viewport,
.home46m-item--albayan .home46m-image-viewport{aspect-ratio:auto!important}
.home46m-frame-link:hover .home46m-image-viewport img{transform:scale(1.004)!important}

/* Mockup plaque: simple warm ivory plate, narrower than the wooden frame. */
.home46m-plaque{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:78%;
  min-height:58px;
  margin:-1px auto 0;
  padding:10px 12px 9px;
  text-align:center;
  background:linear-gradient(180deg,#f8ead8 0%,#efe0cb 100%);
  border:1px solid rgba(148,102,67,.28);
  border-top-color:rgba(148,102,67,.16);
  border-radius:0 0 2px 2px;
  box-shadow:0 7px 13px rgba(70,48,32,.05),inset 0 1px rgba(255,255,255,.68);
}
.home46m-plaque strong{
  color:#413a35;
  font-size:clamp(12px,.84vw,15px);
  font-weight:900;
  letter-spacing:.095em;
  line-height:1.15;
}
.home46m-plaque small{
  color:#80624e;
  font-size:clamp(9px,.62vw,11px);
  font-weight:800;
  letter-spacing:.075em;
  line-height:1.18;
}
.home46m-footer{display:none}

.home46m-media[dir="rtl"] .home46m-head,
.home46m-media[dir="rtl"] .home46m-plaque{direction:rtl;text-align:center}
.home46m-media[dir="rtl"] .home46m-gallery{direction:rtl}

@media(max-width:1380px){
  .home46m-media{min-height:850px}
  .home46m-gallery{width:min(81vw,1080px);max-width:calc(100vw - 190px);gap:25px}
  .home46m-media::before,.home46m-media::after{width:clamp(110px,10vw,145px);opacity:.93}
  .home46m-head{margin-bottom:38px}
}

@media(max-width:1100px){
  .home46m-media{min-height:auto;padding:58px 0 110px}
  .home46m-gallery{width:min(88vw,920px);max-width:none;gap:19px}
  .home46m-media::before,.home46m-media::after{width:96px;opacity:.67}
  .home46m-head h2 span{white-space:normal}
  .home46m-baseboard{top:73.5%}
}

@media(max-width:900px){
  .home46m-media{padding:50px 12px 82px}
  .home46m-media::before,.home46m-media::after{display:none}
  .home46m-gallery{
    width:100%;max-width:760px;
    grid-template-columns:1.074fr 1fr;
    gap:24px;
  }
  .home46m-item--albayan{grid-column:1 / -1;width:min(48%,360px);justify-self:center}
  .home46m-room::after{top:81%}
  .home46m-baseboard{top:77.8%}
  .home46m-light{opacity:.42;height:31%}
}

@media(max-width:650px){
  .home46m-media{padding:42px 9px 66px;min-height:auto}
  .home46m-head{margin-bottom:28px;padding-inline:4px}
  .home46m-kicker{min-height:32px;padding:6px 20px;font-size:10px}
  .home46m-head h2{font-size:clamp(36px,10.8vw,50px)}
  .home46m-head p{font-size:14px;line-height:1.48}
  .home46m-gallery{grid-template-columns:1fr;max-width:420px;gap:28px}
  .home46m-item--albayan{grid-column:auto;width:auto}
  .home46m-frame{padding:10px}
  .home46m-plaque{width:80%;min-height:54px}
  .home46m-room::after{top:89%}
  .home46m-baseboard{top:86.5%;left:3%;right:3%}
}

@media(max-width:420px){
  .home46m-shell{padding-inline:5px}
  .home46m-frame{padding:8px}
  .home46m-plaque{width:82%;padding-inline:8px}
  .home46m-plaque strong{font-size:12px;letter-spacing:.065em}
  .home46m-plaque small{font-size:9px;letter-spacing:.035em}
}

@media(prefers-reduced-motion:reduce){
  .home46m-frame-link,.home46m-image-viewport img{transition:none!important}
  .home46m-frame-link:hover{transform:none!important;filter:none!important}
  .home46m-frame-link:hover .home46m-image-viewport img{transform:none!important}
}