/* ALTERRA VR — CLEAN RESPONSIVE BLOCK 02 V1
   Desktop baseline untouched. This file only affects <=1100px.
   Old approved desktop Block 02 stays visible above 1100px. */

.m2-immersion{display:none}

@media (max-width:1100px){
  /* Hide only the old desktop Block 02 on mobile/tablet. */
  .immersion{display:none !important}

  .m2-immersion{
    display:block;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#f5f9fc;
    background:#03121e;
    border-top:1px solid rgba(72,226,250,.16);
    border-bottom:1px solid rgba(72,226,250,.14);
  }

  .m2-visual{
    position:relative;
    height:clamp(300px,48vw,500px);
    overflow:hidden;
    background:#03111d;
  }
  .m2-visual img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:66% 48%;
    filter:saturate(1.02) contrast(1.06) brightness(.90);
  }
  .m2-visual::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(2,13,23,.02) 0%,rgba(2,13,23,.10) 48%,#03121e 100%),
      linear-gradient(90deg,rgba(2,13,23,.24),transparent 58%);
  }
  .m2-visual-mark{
    position:absolute;
    z-index:2;
    right:clamp(20px,4vw,38px);
    bottom:clamp(28px,5vw,50px);
    width:clamp(64px,10vw,94px);
    aspect-ratio:1;
    border:1px solid rgba(75,233,255,.38);
    border-radius:50%;
    box-shadow:0 0 0 12px rgba(40,218,244,.035),0 0 38px rgba(40,218,244,.10);
  }
  .m2-visual-mark::before,
  .m2-visual-mark::after{
    content:"";
    position:absolute;
    inset:18%;
    border:1px solid rgba(102,239,255,.34);
    border-radius:50%;
  }
  .m2-visual-mark::after{inset:38%;background:#5cecff;border:0;box-shadow:0 0 18px rgba(92,236,255,.5)}

  .m2-inner{
    width:min(calc(100% - 38px),920px);
    margin:0 auto;
    padding:4px 0 54px;
    box-sizing:border-box;
  }
  .m2-kicker{
    margin:0 0 12px;
    color:#67efff;
    font-size:clamp(10px,2.4vw,13px);
    line-height:1.2;
    letter-spacing:.17em;
    font-weight:950;
    text-transform:uppercase;
  }
  .m2-title{
    max-width:800px;
    margin:0;
    color:#f7f9fc;
    font-size:clamp(48px,8vw,78px);
    line-height:.91;
    letter-spacing:-.052em;
    font-weight:1000;
    text-transform:uppercase;
  }
  .m2-title span{display:block;color:#2bdff2}
  .m2-lead{
    max-width:700px;
    margin:22px 0 0;
    color:#dbe8f1;
    font-size:clamp(15px,2.3vw,18px);
    line-height:1.55;
  }

  .m2-points{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:32px;
  }
  .m2-card{
    position:relative;
    min-height:182px;
    overflow:hidden;
    border:1px solid rgba(59,222,247,.48);
    border-radius:16px;
    background:#061a2b;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 38px rgba(0,0,0,.22);
  }
  .m2-card-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:68% center;
    filter:saturate(1.16) contrast(1.07) brightness(1.03);
    transform:none;
  }
  .m2-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#061a2b 0%,rgba(6,26,43,.98) 40%,rgba(6,26,43,.79) 61%,rgba(6,26,43,.18) 100%);
  }
  .m2-card-content{
    position:relative;
    z-index:2;
    width:58%;
    padding:20px 16px 20px 18px;
    box-sizing:border-box;
  }
  .m2-card-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-bottom:13px;
    border:1px solid rgba(83,234,255,.85);
    border-radius:50%;
    color:#5cecff;
    background:rgba(2,17,29,.68);
    box-shadow:0 0 22px rgba(48,219,244,.10);
    font-size:15px;
  }
  .m2-card strong{
    display:block;
    color:#f7fbff;
    font-size:14px;
    line-height:1.16;
  }
  .m2-card p{
    margin:7px 0 0;
    color:#c2d2df;
    font-size:12px;
    line-height:1.42;
  }
  .m2-index{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:28px;
    color:#6fe9fb;
    font-size:9px;
    line-height:1.2;
    letter-spacing:.16em;
    font-weight:850;
    text-transform:uppercase;
  }
  .m2-index::after{
    content:"";
    height:1px;
    flex:1;
    background:linear-gradient(90deg,#32d8ef,transparent);
  }
}

@media (max-width:767px){
  .m2-visual{
    height:clamp(280px,76vw,370px);
  }
  .m2-visual img{object-position:92% 48%}
  .m2-inner{
    width:calc(100% - 36px);
    padding-top:8px;
    padding-bottom:46px;
  }
  .m2-title{
    font-size:clamp(42px,11.6vw,56px);
    line-height:.91;
  }
  .m2-lead{margin-top:18px;font-size:15px;line-height:1.52}
  .m2-points{grid-template-columns:1fr;gap:11px;margin-top:26px}
  .m2-card{min-height:136px;border-radius:14px}
  .m2-card-content{width:56%;padding:16px 12px 15px 14px}
  .m2-card-icon{width:36px;height:36px;margin-bottom:9px;font-size:13px}
  .m2-card strong{font-size:14px;line-height:1.16}
  .m2-card p{font-size:11px;line-height:1.38;margin-top:5px}
  .m2-card-art{object-position:78% center}
  .m2-card::after{background:linear-gradient(90deg,rgba(6,26,43,.93) 0%,rgba(6,26,43,.82) 36%,rgba(6,26,43,.42) 58%,rgba(6,26,43,.00) 82%)}
  .m2-index{margin-top:22px}
  .m2-card:nth-child(1) .m2-card-art{object-position:80% center}
  .m2-card:nth-child(2) .m2-card-art{object-position:94% center;transform:scale(1.18)}
  .m2-card:nth-child(3) .m2-card-art{object-position:92% center;transform:scale(1.16)}
  .m2-card:nth-child(2)::after,.m2-card:nth-child(3)::after{background:linear-gradient(90deg,rgba(6,26,43,.92) 0%,rgba(6,26,43,.72) 28%,rgba(6,26,43,.18) 50%,rgba(6,26,43,0) 72%)}
  .m2-card:nth-child(2) .m2-card-content,.m2-card:nth-child(3) .m2-card-content{width:52%}
}


@media (max-width:430px){
  .m2-visual{height:300px}
  .m2-visual::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#03121e 0%,rgba(3,18,30,.92) 48%,rgba(3,18,30,0) 100%)}
  .m2-visual img{object-position:100% 48%}
  .m2-inner{width:calc(100% - 32px);padding-top:2px}
  .m2-kicker{font-size:9px;margin-bottom:10px}
  .m2-title{font-size:clamp(34px,9.3vw,40px);line-height:.98;letter-spacing:-.032em}
  .m2-lead{font-size:14px}
  .m2-points{margin-top:22px}
  .m2-card{min-height:132px}
  .m2-card-content{width:55%;padding:14px 10px 14px 13px}
  .m2-card-icon{width:34px;height:34px;margin-bottom:8px}
  .m2-card strong{font-size:13.5px;line-height:1.16}
  .m2-card p{font-size:10.5px}
}

/* TABLET FIX V1 — 768..1100 only. Phone and desktop remain untouched. */
@media (min-width:768px) and (max-width:1100px){
  .m2-visual{
    height:clamp(330px,48vw,500px);
    background-image:url("assets/mobile/tablet/block02-immersion-clean.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .m2-visual > img{display:none !important}
}