/* záložky nabídky s obrázkovým pozadím, pozadí Živé ukázky i na mobilu, adresa v růžovém rámečku, průchod jako tmavá sekce s ornamenty */

/* ---------- ornament mezi sekcemi ---------- */
.sec-div { display: grid; place-items: center; padding: 0 0 26px; }
.sec-div .orn { width: 150px; height: 14px; }
@media (min-width: 900px) { .studio { padding-top: 130px; } .sec-div { padding-bottom: 46px; } .sec-div .orn { width: 190px; } }

/* ---------- záložky katalogu: karty s pozadím ---------- */
.tabs { gap: 10px; padding: 8px var(--gutter) 14px; }
.tab { position: relative; overflow: hidden; isolation: isolate; align-content: end; justify-items: start; gap: 0; min-width: 138px; height: 108px; padding: 12px 14px; border-radius: 22px; background: #4a3029; color: #fff; text-align: left; box-shadow: 0 14px 24px -16px rgba(60, 34, 26, .7); }
.tab__bg { position: absolute; inset: -6px; z-index: -2; display: flex; }
.tab__bg img { flex: 1; min-width: 0; width: 33%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.15); transform: scale(1.1); }
.tab__bg--pal i { flex: 1; background: var(--c); filter: saturate(.9); }
.tab::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(38, 24, 19, .12), rgba(38, 24, 19, .68)); transition: opacity .4s; }
.tab__ic { position: absolute; top: 10px; left: 12px; width: 34px; height: 34px; font-size: 19px; background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(4px); }
.tab__n { font-size: 19px; font-weight: 500; line-height: 1.1; text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tab small { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tab:hover { transform: translateY(-4px); }
.tab:hover::before { opacity: .8; }
.tab[aria-selected="true"] { background: #4a3029; color: #fff; transform: translateY(-4px); box-shadow: 0 0 0 2.5px #F3D3BF, 0 20px 30px -14px rgba(60, 34, 26, .85); }
.tab[aria-selected="true"]::before { background: linear-gradient(180deg, rgba(38, 24, 19, .2), rgba(100, 56, 44, .72)); }
.tab[aria-selected="true"] .tab__ic { background: linear-gradient(145deg, #C99A84, var(--rose-deep)); }
@media (min-width: 900px) {
  .tabs { margin-top: 48px; gap: 16px; padding: 10px 0 20px; }
  .tab { min-width: 0; width: clamp(150px, 10.5vw, 190px); height: clamp(116px, 8vw, 140px); padding: 14px 16px; }
  .tab__ic { width: 40px; height: 40px; font-size: 22px; top: 12px; left: 14px; }
  .tab__n { font-size: clamp(20px, 1.35vw, 24px); }
  .tab small { font-size: 15px; }
}

/* ---------- Živá ukázka: pozadí se scénou i na mobilu ---------- */
@media (max-width: 899px) {
  .studio { padding-top: 24px; }
  .stage-wrap { padding: 0 12px; margin-top: 0; }
  .studio__grid { position: relative; isolation: isolate; overflow: hidden; padding: 20px 14px 22px; border-radius: 28px; background: color-mix(in srgb, var(--pal, #b8955a) 10%, #f7ece5); box-shadow: 0 30px 50px -36px rgba(110, 66, 46, .45), inset 0 0 0 1px rgba(184, 149, 90, .28); transition: background .8s ease; }
  .stage__bg { display: block; position: absolute; inset: 0; z-index: -1; }
  .stage__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.2); transform: scale(1.25); opacity: .75; transition: opacity .5s ease; }
  .stage__bg img.is-swap { opacity: 0; }
  .stage__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 246, 240, .15), color-mix(in srgb, var(--pal, #b8955a) 14%, rgba(250, 246, 240, .7))); }
  .studio__grid > .studio__head { margin: 0; padding-top: 4px; }
  .opts, .stepper { margin-inline: -14px; padding-inline: 14px; }
  .sd__c { background: rgba(255, 252, 248, .9); }
}

/* ---------- adresa pozvánky: růžový zaoblený rámeček ---------- */
.addr-sec { margin-top: 90px; padding: 0; color: inherit; background: none; overflow: visible; isolation: auto; }
.addr-sec .wrap { max-width: var(--max); }
@media (min-width: 900px) { .addr-sec { margin-top: 130px; } .addr-sec .wrap { max-width: min(1500px, calc(100% - 48px)); } }

/* ---------- Co uvidí hosté: tmavá sekce s ornamenty ---------- */
.tour { margin-top: 110px; padding: 90px 0 100px; color: #F6EDE6; overflow: hidden; isolation: isolate; background: linear-gradient(165deg, #46302B 0%, #5A3B34 55%, #4B322D 100%); }
.tour::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../img/vzory/ruze.webp') center / cover; opacity: .22; mix-blend-mode: soft-light; }
.tour::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 18% 20%, rgba(214, 160, 130, .22), transparent 70%), radial-gradient(50% 60% at 90% 85%, rgba(214, 160, 130, .16), transparent 70%); }
.tour__rose, .tour__euc { position: absolute; z-index: 0; height: auto; pointer-events: none; opacity: .5; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.tour__rose { width: clamp(110px, 12vw, 230px); }
.tour__rose--l { left: -2%; top: 4%; transform: rotate(-18deg); }
.tour__rose--r { right: 0; bottom: 3%; transform: rotate(14deg); }
.tour__euc { width: clamp(70px, 7vw, 130px); right: 4%; top: 6%; transform: rotate(18deg); opacity: .4; }
.tour .head, .tour__panel { position: relative; z-index: 1; }
.tour .head .h2 { color: #FBF3EC; }
.tour .head .lede { color: rgba(246, 237, 230, .82); }
.tour .head .orn path { stroke: #E3BFA8; }
.tour .head .orn circle { fill: #E3BFA8; }
.tour .ti { background: rgba(255, 245, 238, .07); box-shadow: inset 0 0 0 1px rgba(255, 235, 222, .16); }
.tour .ti.is-on { background: rgba(255, 245, 238, .15); box-shadow: inset 0 0 0 1.5px #E9BFA7, 0 24px 34px -22px rgba(0, 0, 0, .55); }
.tour .ti__b { color: #FBF3EC; }
.tour .ti__n { background: rgba(255, 235, 222, .14); color: #F3D3BF; }
.tour .ti.is-on .ti__n { background: linear-gradient(145deg, #D2A48E, #A87560); color: #fff; }
.tour .ti__c { color: rgba(246, 237, 230, .7); }
.tour .ti__d p { color: rgba(246, 237, 230, .8); }
.tour .ti__d ul, .tour__info ul { color: #F6EDE6; }
.tour .ti__d li::before, .tour__info li::before { border-color: #E9BFA7; }
.tour .ti__d img { box-shadow: 0 0 0 1px rgba(255, 235, 222, .25); }
.tour__no { color: rgba(233, 191, 167, .5) !important; }
.tour__info h3 { color: #FBF3EC !important; }
.tour__info p { color: rgba(246, 237, 230, .82) !important; }
.tour .sbtn { background: rgba(255, 245, 238, .1); border-color: rgba(255, 235, 222, .4); color: #FBF3EC; }
.tour .sbtn--next { background: linear-gradient(145deg, #C99A84, #A87560); border-color: transparent; }
.tour .ti:hover { box-shadow: inset 0 0 0 1.5px rgba(233, 191, 167, .7); }
.tour .phone__body { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 40px 70px -24px rgba(0, 0, 0, .7); }
@media (min-width: 900px) { .tour { margin-top: 150px; padding: 150px 0 160px; } .tour__phone .phone { filter: none !important; } }