/* Strat pentru telefoane, adăugat peste style.css și premium.css.
   Desktopul nu e atins: regulile de mai jos se aplică doar pe ecrane tactile
   (pointer:coarse), iar layoutul imersiv doar pe telefon ținut orizontal.
   Revenire: șterge acest fișier și linia lui din index.html. */

/* Mesaj scurt (link copiat, senzori), pe toate dispozitivele. */
.toast{position:absolute;left:50%;top:calc(50% + 70px);transform:translate(-50%,8px);z-index:8;max-width:min(420px,calc(100% - 40px));padding:10px 16px;border:1px solid var(--line);border-radius:22px;background:rgba(32,29,24,.86);color:var(--cream);font-size:11px;line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;overflow-wrap:anywhere}
.toast.show{opacity:1;transform:translate(-50%,0)}
#gyro[hidden]{display:none}

/* Pe telefon, panorama se redesenează la fiecare cadru în timpul rotirii. Fundalurile estompate
   (backdrop-filter) peste ea se recalculau și ele la fiecare cadru; le înlocuim cu fundaluri
   aproape opace, care arată la fel de sobru și nu încarcă placa video. */
@media (pointer:coarse){
 .icon-button,.photo-button,.tool-group,#focus-view,#map-button,#current-level,.sequence-controls button,.connections button,.connections button.secondary,.hotspot .disk,.hotspot .hotspot-label,.drag-hint,#loading,.floor-rail,.demo-pill{-webkit-backdrop-filter:none;backdrop-filter:none}
 .icon-button,.photo-button,#focus-view,#map-button,#current-level,.tool-group,.sequence-controls button,.connections button.secondary{background:rgba(32,29,24,.62)}
 .hotspot .hotspot-label{background:rgba(32,29,24,.78)}
 .drag-hint{background:rgba(32,29,24,.78)}
}

/* ——— Telefon ținut orizontal: panorama pe tot ecranul, interfață pe margini ——— */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
 :root{--ml-left:max(14px,env(safe-area-inset-left));--ml-right:max(14px,env(safe-area-inset-right));--ml-bottom:max(8px,env(safe-area-inset-bottom))}
 html,body,#tour{height:100dvh}
 .vignette{background:linear-gradient(180deg,rgba(24,22,18,.55),transparent 22%,transparent 72%,rgba(24,22,18,.62))}

 /* Antet: un singur rând subțire. Contactul rămâne mereu la vedere. */
 html .header{padding:8px var(--ml-right) 0 var(--ml-left);align-items:center;gap:12px;height:56px}
 html .brand{font-size:9px;gap:8px;letter-spacing:.16em}html .brand-mark{width:30px;height:30px;font-size:25px}html .brand small{font-size:6px;margin-top:3px}
 html .header-actions{width:auto;max-width:none;flex-wrap:nowrap;gap:6px}
 html .header-actions .icon-button,html .photo-button{width:40px;height:40px;min-height:40px;padding:10px;border-radius:50%}
 html .photo-button span,html .photo-button b{display:none}
 html .visit-button{order:0;width:auto;min-height:40px;padding:0 13px;gap:10px;font-size:10px;white-space:nowrap}
 html .visit-button span{font-size:14px}

 /* Unelte de vizualizare: o coloană îngustă pe dreapta. Zoomul se face cu două degete sau dublă atingere. */
 html .view-tools{top:50%;bottom:auto;right:var(--ml-right);transform:translateY(-50%);flex-direction:column;align-items:flex-end;gap:6px}
 html .view-tools .tool-group{display:none}
 html .view-tools .icon-button{width:40px;height:40px}
 html #focus-view{min-height:40px;margin:0;padding:0 12px;font-size:9px}
 html body.clean .view-tools{top:auto;bottom:calc(var(--ml-bottom) + 6px);transform:none}

 /* Jos: un singur rând — titlul camerei, destinațiile, apoi etajul, planul și pașii. */
 html .tour-bottom{left:var(--ml-left);right:var(--ml-right);width:auto;transform:none;bottom:calc(var(--ml-bottom) + 12px);display:flex;align-items:center;gap:10px}
 html .dock{display:contents}
 html .location{order:1;flex:0 1 auto;max-width:26%;min-width:0}
 html .location .eyebrow,html .location p#scene-description{display:none}
 html .location h2{font-size:17px;line-height:1.15;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html #photo-details{min-height:24px;margin:2px 0 0;font-size:9px;gap:6px;white-space:nowrap}
 html #photo-details svg{width:12px;height:12px}
 html .route-top{order:2;flex:1 1 auto;min-width:0;margin:0;min-height:40px;gap:0}
 html .connections{max-width:none;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:0}
 html .connections::-webkit-scrollbar{display:none}
 html .connections button,html .connections button.secondary{min-height:38px;padding:0 12px;font-size:9.5px;gap:10px;white-space:nowrap}
 html .connections svg{width:13px;height:13px}
 html .progress-wrap,html #return-yard{display:none}
 html .dock-navigation{order:3;flex:0 0 auto;margin:0;gap:6px;justify-content:flex-end}
 html #current-level{min-height:38px;padding:0 12px;font-size:10px}
 html #map-button{width:38px;height:38px;min-height:38px;padding:0;justify-content:center}
 html #map-button span,html #map-button b{display:none}
 html .sequence-controls{gap:4px}html .sequence-controls button{width:38px;height:38px}html .sequence-controls span{display:none}
 html .disclosure{bottom:max(2px,calc(var(--ml-bottom) - 6px));font-size:7px;opacity:.75}
 html .drag-hint{top:46%}
 html .toast{top:auto;bottom:calc(var(--ml-bottom) + 64px)}

 /* Ecranul de bun venit: textul pe stânga, fără să atingă butoanele. */
 html .welcome-copy{left:var(--ml-left);top:52%;transform:translateY(-42%);max-width:55%}

 /* ——— Galeria: fotografia pe toată înălțimea, comenzile într-o coloană laterală ——— */
 html .photo-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 html .photo-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) min(230px,32vw);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"stage head" "stage filters" "stage bar" "stage thumbs"}
 html .photo-dialog .panel-head{grid-area:head;padding:calc(8px + env(safe-area-inset-top)) var(--ml-right) 6px 12px;border:0;gap:8px;align-items:center}
 html .photo-dialog .panel-head p{display:none}
 html .photo-dialog .panel-head h2{font-size:16px;margin:0;line-height:1.2}
 html .photo-return{font-size:0;gap:0;padding:0;width:40px;height:40px;min-height:40px;flex-shrink:0;justify-content:center}
 html .photo-dialog .photo-filters{grid-area:filters;padding:4px var(--ml-right) 6px 12px;gap:6px;flex-wrap:wrap}
 html .photo-dialog .photo-filters button{font-size:9px;padding:0 10px;min-height:32px;white-space:nowrap}
 html #photo-counter{font-size:9px}
 html .photo-dialog .photo-stage{grid-area:stage;height:auto;min-height:0;aspect-ratio:auto;padding:0;margin-left:var(--ml-left)}
 html .photo-dialog .photo-detail-bar{grid-area:bar;display:block;padding:4px var(--ml-right) 8px 12px}
 html .photo-dialog #photo-caption{max-width:none;font-size:10px;line-height:1.45;padding:0 0 6px}
 html .photo-detail-tools{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px}
 html #photo-resolution{flex-basis:100%;font-size:8px}
 html #photo-full,html #photo-zoom{min-height:32px;font-size:9px;padding:0 10px;gap:7px}
 html .photo-dialog .photo-thumbs{grid-area:thumbs;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));align-content:start;gap:6px;overflow-x:hidden;overflow-y:auto;min-height:0;padding:0 var(--ml-right) calc(8px + var(--ml-bottom)) 12px}
 html .photo-dialog .photo-thumbs img{width:100%;height:auto;aspect-ratio:1.5}
 html .photo-dialog .photo-note{display:none}
 html .photo-dialog .photo-arrow{width:40px;height:40px}
 /* Ecran complet în galerie: doar fotografia și bara de jos, peste ea. */
 html .photo-dialog.full[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"stage"}
 html .photo-dialog.full .photo-stage{margin:0}
 html .photo-dialog.full .photo-detail-bar{display:flex;justify-content:space-between;align-items:flex-end;padding:24px var(--ml-right) calc(8px + var(--ml-bottom)) var(--ml-left)}
 html .photo-dialog.full #photo-caption{max-width:45%;padding:0}
 html .photo-dialog.full #photo-resolution{flex-basis:auto}

 /* ——— Planul: listă în stânga, plan în dreapta, pe tot ecranul ——— */
 html #map-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 html #map-dialog[open]{display:flex;flex-direction:column}
 html #map-dialog .panel-head{padding:calc(6px + env(safe-area-inset-top)) var(--ml-right) 6px var(--ml-left);gap:10px}
 html #map-dialog .panel-head p{display:none}
 html #map-dialog .panel-head h2{font-size:17px;margin:0}
 html #map-dialog .panel-head .icon-button{width:40px;height:40px}
 html .level-tabs{padding:8px var(--ml-right) 0 var(--ml-left);gap:6px}
 html .level-tabs button{min-height:0;padding:7px 12px;flex-direction:row;align-items:baseline;gap:8px}
 html .level-tabs button span{font-size:11px}html .level-tabs button small{font-size:8.5px}
 html .map-content{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:10px;height:auto;padding:8px var(--ml-right) calc(6px + var(--ml-bottom)) var(--ml-left)}
 html #route-list{display:flex;flex-direction:column;gap:6px;max-height:none;height:100%;min-height:0;overflow-y:auto;padding:0 2px 0 0;border:0}
 html #route-list button{display:grid;grid-template-columns:72px minmax(0,1fr);min-height:50px;flex-shrink:0}
 html #route-list button img{width:72px;height:100%;min-height:50px;aspect-ratio:auto}
 html .room-card-bottom{padding:6px 10px;gap:6px}
 html #route-list button b{font-size:14px}html #route-list button small{font-size:7.5px;line-height:1.4;margin-top:2px}
 html .plan-section{display:flex;flex-direction:column;min-height:0;height:100%;padding:6px 8px;gap:4px}
 html .plan-top{font-size:9px}html .plan-section p{display:none}
 html #tour-map{flex:1 1 auto;min-height:0;width:100%;height:100%;max-height:none}
 html .room-note{display:none}

 /* ——— Vizionare și Despre: două coloane, fără derulare ——— */
 html .visit-dialog,html .about-dialog{width:min(760px,calc(100vw - 2 * var(--ml-left)));max-height:calc(100dvh - 16px);overflow-y:auto}
 html .visit-dialog .panel-head,html .about-dialog .panel-head{padding:12px 20px;gap:12px}
 html .visit-dialog .panel-head h2,html .about-dialog .panel-head h2{font-size:20px;margin-top:3px}
 html .visit-dialog .panel-head .icon-button,html .about-dialog .panel-head .icon-button{width:40px;height:40px}
 html .visit-photo,html .about-dialog>img{display:none}
 html .visit-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"text actions" "agent actions" "note link";column-gap:22px;row-gap:10px;align-items:start;padding:14px 20px 16px}
 html .visit-body>p{grid-area:text;margin:0;font-size:12px;line-height:1.6}
 html .visit-body .agent-card{grid-area:agent;margin:0}
 html .visit-body .contact-actions{grid-area:actions;gap:8px}
 html .visit-body .visit-link{min-height:46px;padding:12px 16px}
 html .visit-body .visit-secondary{grid-area:link;margin:0;font-size:11px}
 html .visit-body small{grid-area:note;margin:0;font-size:10px;line-height:1.5}
 html .about-body{padding:14px 20px 16px}
}

/* Telefoane mici în landscape (iPhone SE): titlul camerei cedează loc butoanelor. */
@media (orientation:landscape) and (max-height:500px) and (max-width:700px) and (pointer:coarse){
 html .brand>span:not(.brand-mark){display:none}
 html .location{max-width:22%}
 html .location h2{font-size:15px}
 html #current-level{padding:0 10px;font-size:9px}
}

/* Plan-first room picker: full width map, compact optional room shortcuts. */
.plan-viewport{display:contents}.plan-zoom{display:none}
@media (max-width:700px), (max-width:1000px) and (max-height:500px){
 html #map-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:0;overflow:hidden}
 html #map-dialog[open]{display:flex;flex-direction:column}
 html #map-dialog .panel-head{flex:none;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));gap:8px}
 html #map-dialog .panel-head p{display:none}
 html #map-dialog .panel-head h2{font-size:20px;margin:0}
 html #map-dialog .panel-head .icon-button{width:40px;height:40px;flex:none}
 html #map-dialog .level-tabs{flex:none;padding:4px 12px 0;gap:8px}
 html #map-dialog .level-tabs button{min-height:44px;padding:8px 12px;justify-content:center}
 html #map-dialog .level-tabs button small{display:none}
 html #map-dialog .map-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));overflow:hidden}
 html #map-dialog .plan-section{order:0;flex:1;min-height:0;width:100%;padding:8px 4px;gap:4px;overflow:hidden;justify-content:flex-start}
 html #map-dialog .plan-top{flex:none;font-size:10px;padding:0 6px}
 html #map-dialog .plan-section p,html #map-dialog .room-note{display:none}
 html #map-dialog .plan-viewport{display:flex;align-items:center;flex:1;min-height:0;width:100%;min-width:0;max-width:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}
 html #map-dialog #tour-map{display:block;flex:none;width:100%;height:auto;max-height:none;min-height:0;overflow:visible}
 html #map-dialog .plan-viewport.enlarged #tour-map{width:max(720px,140%)}
 html #map-dialog .plan-zoom{display:block;align-self:flex-end;flex:none;min-height:36px;padding:6px 12px;border:1px solid #d9cebb;border-radius:18px;background:#eee8dc;color:var(--ink);font-size:11px}
 html #map-dialog #route-list{order:1;display:flex;flex-direction:row;flex:none;width:100%;height:44px;max-height:44px;padding:0 4px;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 html #map-dialog #route-list button{display:block;flex:none;min-height:44px;height:44px;width:auto;padding:0 12px;white-space:nowrap}
 html #map-dialog #route-list button img,html #map-dialog #route-list button small,html #map-dialog .room-arrow{display:none}
 html #map-dialog .room-card-bottom{padding:0;display:flex;height:100%;align-items:center}
 html #map-dialog #route-list button b{font-size:11px}
}
@media (max-width:1000px) and (max-height:500px){
 html #map-dialog .panel-head{padding-top:4px;padding-bottom:0}
 html #map-dialog .panel-head h2{font-size:17px}
 html #map-dialog .level-tabs{position:absolute;top:4px;left:36%;right:64px;padding:0}
 html #map-dialog .level-tabs button{min-height:36px;padding:5px 10px}
 html #map-dialog .plan-top,html #map-dialog .plan-zoom{display:none}
 html #map-dialog .plan-section{padding:0;border:0}
 html #map-dialog .map-content{gap:4px;padding-top:4px}
 html #map-dialog .plan-viewport{justify-content:center}
 html #map-dialog #tour-map,html #map-dialog .plan-viewport.enlarged #tour-map{width:auto;max-width:100%;height:100%;max-height:100%}
}