/* magazin.css — the store and how to get it (019, build P6 → blue world P10): address, route in photos, hall, terms, reviews, about us. */

.mg-hero { padding-block: clamp(24px, 2.2vw, 44px) clamp(40px, 4vw, 90px); }
.mg-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.mg-hero__txt { grid-column: 1 / span 5; display: grid; align-content: start; gap: 14px; }
.mg-hero__cap { margin-top: clamp(24px, 2.4vw, 48px); }
.mg-hero__t { font: 400 clamp(40px, 3.6vw, 96px)/1 var(--f-display); letter-spacing: -.015em; }
.mg-hero__addr { font: 600 var(--fs-3)/1.25 var(--f-text); }
.mg-facts { display: grid; gap: 12px; margin: 8px 0 0; }
.mg-facts dt { font: 600 13px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.mg-facts dd { margin: 0; font-weight: 600; font-size: var(--fs-2); }
.mg-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.mg-map { grid-column: 6 / span 7; position: relative; min-height: clamp(420px, 34vw, 900px); border-radius: var(--r-xl); overflow: hidden; background: var(--panel); }
.mg-map__ph, .mg-map__if { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mg-map__if { opacity: 0; transition: opacity .6s var(--ease-h); }
.mg-map__if.is-loaded { opacity: 1; }
.mg-map__open { position: absolute; left: 16px; bottom: 16px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; }

.walk__route { max-width: 70ch; font-size: var(--fs-2); line-height: 1.5; margin-bottom: clamp(20px, 2vw, 40px); }
.walk__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: w; }
.wstep { position: relative; display: grid; gap: 12px; align-content: start; }
.wstep img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-l); }
.wstep__n { position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font: 400 20px/1 var(--f-display); }
.wstep__t { font-weight: 500; line-height: 1.4; }
.walk__videos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(28px, 3vw, 64px); align-items: center; }
.walk__videos .short { grid-column: span 3; }
.walk__note { grid-column: 8 / span 5; display: grid; gap: 14px; padding: clamp(22px, 2vw, 40px); border-radius: var(--r-xl); background: var(--mist); }

/* shorts (same as home) */
.short { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-l); overflow: hidden; background: var(--card); margin: 0; }
.short video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.short__tag { position: absolute; left: 12px; top: 12px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(10, 22, 40, .78); color: #fff;
  font: 500 14px/1 var(--f-text); z-index: 2; transition: opacity var(--t-h) var(--ease-h); }
.short.is-play .short__tag, .short.is-play figcaption { opacity: 0; }
.short__snd { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--navy); display: grid; place-items: center; z-index: 2; }
.short__snd svg { width: 18px; height: 18px; }
.short figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #fff; transition: opacity var(--t-h) var(--ease-h); }
.short figcaption b { font: 600 var(--fs-1)/1.2 var(--f-text); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.short::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }

.hall__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 11vw, 300px); grid-auto-flow: dense; gap: var(--gutter); }
.hg { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-l); }
.hg--a { grid-column: span 2; grid-row: span 2; }
.hg--b { grid-column: span 2; }
.hg--c { grid-row: span 2; }
.hg--d { grid-row: span 2; }
.hg--e { grid-column: span 2; }
.hg--g { grid-column: span 2; }
.hg--h, .hg--i { grid-row: span 1; }
.hg--j { grid-column: span 1; }   /* 6 columns x 3 rows = 18 cells: a 4 + b 2 + c 2 + d 2 + e 2 | f g2 h i j — no holes (r1: 19 cells left gaps) */

.terms { margin-block: clamp(20px, 2vw, 40px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.terms__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.terms__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 16px; }
.terms__promise { padding: 18px 20px; border-radius: var(--r-l); background: var(--panel); }
.terms__body { grid-column: 5 / span 8; display: grid; gap: var(--gutter); }
.tcard { display: grid; gap: 12px; padding: clamp(22px, 2vw, 40px); border-radius: var(--r-xl); background: var(--panel); max-width: 900px; }
.tcard__t { display: flex; gap: 12px; align-items: center; font: 600 var(--fs-3)/1.2 var(--f-text); }
.tcard__t svg { width: 28px; height: 28px; color: var(--ink); }
.tcard__ol { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; }
.tcard__ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; color: var(--ink-2); }
.tcard__alt { color: var(--ink-2); }
.tcard__warn { font-weight: 600; }
.pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pay li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px rgba(244, 239, 232, .22); font-weight: 500; }
.pay svg { width: 24px; height: 24px; color: var(--ink); }
.faq { display: grid; gap: 10px; padding: clamp(22px, 2vw, 40px); border-radius: var(--r-xl); background: var(--panel); max-width: 900px; }
.faq__i { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq__i summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-2); }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: "+"; flex: none; font: 400 28px/1 var(--f-text); transition: transform .4s var(--ease); }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i p { margin-top: 8px; color: var(--ink-2); }
.faq__go { justify-self: start; margin-top: 12px; }

.mrev__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.mrev__side { grid-column: 1 / span 4; display: grid; gap: var(--gutter); }
.ymap { display: grid; gap: 6px; padding: clamp(22px, 2vw, 40px); border-radius: var(--r-xl); background: var(--panel); }
.ymap__src { font: 600 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: #ff8a7a; }
.ymap__rate { font: 400 clamp(64px, 5vw, 120px)/1 var(--f-display); margin-top: 10px; }
.ymap__stars { color: #fc3f1d; font-size: 26px; letter-spacing: 3px; }
.ymap__n { color: var(--ink-2); }
.mrev__widget { height: clamp(420px, 34vw, 800px); border-radius: var(--r-xl); overflow: hidden; background: var(--card); }
.mrev__widget:not(.is-loaded) { display: none; }
.mrev__widget iframe { width: 100%; height: 100%; border: 0; }
.mrev__list { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.review { margin: 0; display: grid; align-content: space-between; gap: 18px; padding: clamp(20px, 1.8vw, 36px); border-radius: var(--r-xl); background: var(--panel); }
.review p { font: 500 var(--fs-2)/1.45 var(--f-text); }
.review p::before { content: "«"; } .review p::after { content: "»"; }
.review cite { font-style: normal; font-size: var(--fs-0); color: var(--ink-2); }
.review--big { grid-column: 1 / -1; background: var(--mist); box-shadow: none; }
.review--big p { font-size: var(--fs-3); line-height: 1.35; }

.about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.about__txt { grid-column: 1 / span 6; display: grid; gap: 14px; max-width: 68ch; color: var(--ink-2); }
.about__hi { font: 400 clamp(32px, 2.8vw, 72px)/1.05 var(--f-display); color: var(--ink); }
.about__lead { font: 600 var(--fs-3)/1.3 var(--f-text); color: var(--ink); }
.about__big { font: 700 var(--fs-3)/1.2 var(--f-text); color: var(--link); }
.about__cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 10px; }
.about__photos { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.about__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-l); }
.about__photos img:last-child { margin-top: 18%; }