/* Shared 900px breakpoint with interface.css and script.js compactLayout.
   Loaded last; desktop rules above 900px remain unchanged. */
.mobile-file-label,.mobile-map { display:none; }
@media (max-width:900px) {
  html,body { width:100%; min-width:0; height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  .desktop { display:flex; flex-direction:column; height:auto; min-height:100vh; min-height:100svh; width:100%; padding:env(safe-area-inset-top) 0 max(22px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 0 35%,#67bad0 0,transparent 55%),radial-gradient(ellipse at 100% 65%,#766cc9 0,transparent 60%),linear-gradient(155deg,#243c75,#206d99 55%,#29244e); }
  .menu-bar { order:0; flex-shrink:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; height:46px; padding:0 26px; }
  .menu-left .sergio-mark,.menu-right > span:not(#clock) { display:none; }
  .menu-left strong { font-size:13px; letter-spacing:-.02em; }
  .menu-right #clock { font-size:14px; font-weight:600; }
  .hero { order:1; padding:18px 26px 24px; margin:0; }
  .hero-meta,.hero-bottom { display:none; }
  .hero h1 { font-size:clamp(29px,8vw,43px); letter-spacing:-.045em; line-height:1.05; margin:0; }
  .hero h1 br { display:none; }
  .desktop-widgets { order:2; padding:0 22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; z-index:3; }
  .desktop-widget { min-width:0; height:auto; min-height:156px; border-radius:25px; padding:16px; box-shadow:0 8px 24px #11244726,inset 0 1px #ffffff45; border:1px solid #ffffff38; }
  .flip-widget { grid-column:auto; background:linear-gradient(145deg,#193d8fd9,#5376c97d); }
  .widget-eyebrow { font-size:8px; letter-spacing:.06em; line-height:1.4; }
  .flip-clock { gap:3px; margin:22px 0 15px; }
  .flip-tile { width:45px; height:48px; font-size:31px; border-radius:7px; }
  .flip-colon { font-size:19px; }
  .widget-note { font-size:10px; line-height:1.4; }
  .work-widget { grid-column:1/-1; min-height:0; display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:14px 18px; text-align:left; background:#e1ecff22; }
  .work-widget .widget-eyebrow { grid-column:2; grid-row:1; }
  .work-widget strong { grid-column:1; grid-row:1/3; margin:0; font-size:34px; align-self:center; }
  .work-widget > span:not(.widget-eyebrow):not(.widget-note) { grid-column:2; font-size:13px; }
  .work-widget .widget-note { display:none; }
  .location-widget { grid-column:2; grid-row:1; position:relative !important; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:#223d47; isolation:isolate; background:#dbe9de; }
  .location-widget .widget-eyebrow,.location-widget .location-orbit { display:none; }
  .location-widget strong { position:relative; margin:0; font-size:16px; z-index:1; }
  .location-widget .widget-note { position:relative; color:#49626a; z-index:1; font-size:9px; margin-top:4px; }
  .mobile-map { display:block; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#eff3eafa 0%,#eff3eaeb 24%,transparent 60%),linear-gradient(130deg,#d3e8d4,#d9e8ec); }
  .map-park { position:absolute; width:80px; height:80px; border-radius:24px; background:#adcfaa; top:-20px; right:-5px; transform:rotate(25deg); }
  .map-road { position:absolute; height:10px; width:230px; background:#fff; border:1px solid #c7d7d9; top:46px; left:-28px; transform:rotate(-25deg); }
  .road-two { transform:rotate(65deg); left:-65px; top:35px; }
  .road-three { transform:rotate(65deg); left:30px; top:35px; }
  .map-pin { position:absolute; top:27px; left:calc(50% - 17px); width:34px; height:34px; display:grid; place-items:center; color:white; font-size:15px; font-weight:700; border:3px solid white; border-radius:50% 50% 50% 6px; transform:rotate(-12deg); background:#3478ed; box-shadow:0 4px 12px #244d8240; }
  .desktop-files { order:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:28px 18px; gap:8px; }
  .desktop-item { display:flex; flex-direction:column; align-items:center; gap:10px; min-height:96px; padding:0; background:transparent; border:0; box-shadow:none; }
  .desktop-item > span { font-size:11px; line-height:1.3; white-space:nowrap; text-shadow:0 1px 4px #15264f80; }
  .desktop-item small,.desktop-file-label { display:none; }
  .mobile-file-label { display:inline; }
  .desktop-item .folder-icon,.desktop-item .document-icon { position:relative; flex-shrink:0; width:60px; height:60px; margin:0; transform:none; border-radius:15px; box-shadow:0 5px 10px #12255030,inset 0 1px #ffffff66; display:grid; place-items:center; overflow:hidden; }
  #portfolioIcon .folder-icon { background:linear-gradient(#78c7ff,#2874ed); }
  .folder-tab { display:none; }
  #portfolioIcon .folder-body { width:37px; height:27px; inset:auto; position:relative; background:#e4f3ff; border-radius:4px; transform:none; box-shadow:none; }
  #portfolioIcon .folder-body::before { content:''; position:absolute; width:17px; height:6px; background:#e4f3ff; top:-4px; border-radius:3px; }
  #aboutIcon .document-icon { background:linear-gradient(#bdabef,#7962c7); }
  #aboutIcon .document-icon span { font-size:0; }
  #aboutIcon .document-icon span::after { content:'S'; font-size:32px; font-weight:600; color:white; }
  #cvIcon .document-icon { background:linear-gradient(#fff,#e6edf6); color:#3675c7; }
  #cvIcon .document-icon span { font-size:15px; font-weight:700; }
  #contactIcon .document-icon { background:linear-gradient(#76ddbf,#209c93); font-size:32px; color:white; }
  .desktop-item:active { opacity:.75; }
  .dock { order:4; flex-shrink:0; width:calc(100% - 36px); max-width:400px; height:auto; min-height:96px; margin:auto auto 0; padding:32px 12px 14px; display:flex; justify-content:space-between; gap:6px; border-radius:29px; background:#e3efff30; backdrop-filter:blur(25px); }
  .dock .app-icon { width:clamp(34px,10vw,46px); height:clamp(34px,10vw,46px); border-radius:11px; font-size:16px; }
  .dock-label { font-size:9px; }
  .dock-app:hover { transform:none; }
  .glass-window { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); background:linear-gradient(150deg,#293b56fa,#20263afa); }
  .glass-window .window-header { padding-top:0; height:58px; flex-shrink:0; }
  .traffic.red { width:44px; height:44px; border-radius:50%; }
  .traffic.red::after { line-height:42px; }
  .project-content,.about-content,.cv-content { overscroll-behavior:contain; }
  .about-content { max-height:calc(100% - 58px); }
  .finder-toolbar button,.quick-look button { min-width:44px; min-height:44px; }
  .mobile-filters select { min-height:44px; font-size:16px; }
  .project-list { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .contact-link { font-size:13px; }
  .quick-look { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
}
@media (max-width:900px) {
  #portfolioIcon { background:transparent; }
  .desktop-item:focus-visible { outline:2px solid white; outline-offset:4px; }
  .project-file strong { font-size:16px; }
  .project-file > .card-client { font-size:12px; }
  .card-category { font-size:9px; }
  body:has(.glass-window:not(.hidden)) { overflow:hidden; }
  .desktop:has(.glass-window:not(.hidden)) { height:100dvh; overflow:hidden; }
}

/* Mobile-only square widgets and portfolio invitation. */
.mobile-portfolio-widget { display:none; }
@media (max-width:900px) {
  .desktop-widgets { align-items:start; }
  .desktop-widget { aspect-ratio:1; min-height:0; height:auto; }
  .flip-widget { position:relative !important; padding:0; overflow:hidden; background:#659dd1; }
  .flip-widget > .widget-eyebrow,.flip-widget > .flip-clock,.flip-widget > .widget-note { display:none; }
  .mobile-portfolio-widget { display:block; position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; color:white; background:#659dd1; cursor:pointer; text-align:left; }
  .owl-art { position:absolute; inset:30% 0 0; background:url('assets/ui/portfolio-owl.png') center bottom / 100% auto no-repeat; }
  .owl-message { position:absolute; top:10%; left:9%; right:7%; font-size:clamp(16px,4.7vw,27px); line-height:1.05; font-weight:750; letter-spacing:-.035em; }
  .mobile-portfolio-widget:active { filter:brightness(.92); }
  .mobile-portfolio-widget:focus-visible { outline:3px solid white; outline-offset:-5px; border-radius:24px; }
  .work-widget { grid-column:1; display:flex; flex-direction:column; justify-content:space-between; padding:16px; gap:8px; }
  .work-widget strong { font-size:clamp(36px,10vw,60px); align-self:flex-start; }
  .work-widget > span:not(.widget-eyebrow):not(.widget-note) { font-size:12px; }
}

/* Lighter invitation and compact home apps; collection stays desktop-only. */
@media (max-width:900px) {
  .owl-message { font-weight:400; }
  .work-widget { display:none; }
  .desktop-files { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .desktop-item .folder-icon,.desktop-item .document-icon { width:50px; height:50px; border-radius:13px; }
  #portfolioIcon .folder-body { width:31px; height:23px; }
  #aboutIcon .document-icon span::after { font-size:27px; }
  #cvIcon .document-icon span { font-size:13px; }
  #contactIcon .document-icon { font-size:27px; }
  .dock .app-icon { width:clamp(30px,8.5vw,38px); height:clamp(30px,8.5vw,38px); font-size:14px; }
}
@media (max-width:900px) {
  #portfolioIcon .portfolio-app-icon { width:50px; height:50px; margin:0; }
}
@media (max-width:900px) {
  #aboutIcon .about-app-icon { width:50px; height:50px; margin:0; }
}
@media (max-width:900px) {
  #cvIcon .cv-app-icon { width:50px; height:50px; margin:0; }
}
@media (max-width:900px) {
  #contactIcon .contact-app-icon { width:50px; height:50px; margin:0; }
}

/* Compact mobile widgets; map details are illustrative, not geographic data. */
@media (max-width:900px) {
  .desktop-widgets { grid-template-columns:repeat(2,minmax(0,140px)); justify-content:center; gap:14px; padding:0 22px; }
  .desktop-widget { padding:12px; }
  .flip-widget { padding:0; }
  .owl-message { font-size:19px; }
  .location-widget strong { font-size:14px; }
  .location-widget .widget-note { font-size:8px !important; }
  .mobile-map { background:linear-gradient(0deg,#eff3ea 0%,#eff3eae8 24%,transparent 60%),repeating-linear-gradient(12deg,transparent 0 22px,#ffffff90 23px 26px,transparent 27px 43px),#dce8e1; }
  .map-block { position:absolute; border:1px solid #bbc9ce; border-radius:3px; background:repeating-linear-gradient(90deg,#cbd7da 0 8px,#dde5e5 8px 10px); transform:rotate(-25deg); }
  .block-one { width:33px; height:19px; left:5px; top:10px; }
  .block-two { width:32px; height:22px; right:5px; top:57px; }
  .block-three { width:22px; height:17px; left:24px; top:65px; }
  .map-garden { position:absolute; top:6px; right:7px; width:30px; height:20px; border-radius:8px; background:radial-gradient(circle at 25% 45%,#88b88b 0 3px,transparent 4px),radial-gradient(circle at 70% 65%,#8fbd91 0 4px,transparent 5px),#b9d6ad; transform:rotate(15deg); }
  .map-street { position:absolute; width:170px; height:4px; background:#fff; border-bottom:1px solid #c4d3d6; transform:rotate(-25deg); left:-15px; }
  .street-one { top:22px; }
  .street-two { top:71px; }
  .street-three { top:36px; left:-50px; transform:rotate(65deg); }
  .map-place { position:absolute; top:7px; right:10px; font-size:5px; font-weight:600; color:#5b8267; letter-spacing:.04em; }
  .map-pin { z-index:2; width:29px; height:29px; top:32px; left:calc(50% - 14px); font-size:12px; }
}
@media (max-width:360px) {
  .desktop-widgets { grid-template-columns:repeat(2,minmax(0,124px)); gap:12px; }
  .owl-message { font-size:17px; }
}

/* Restore full-width square widgets and enlarge the tool icons slightly. */
@media (max-width:900px) {
  .desktop-widgets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 22px; }
  .owl-message { font-size:clamp(16px,4.7vw,27px); }
  .location-widget strong { font-size:16px; }
  .desktop-widget { padding:16px; }
  .flip-widget { padding:0; }
  .dock .app-icon { width:clamp(34px,10vw,44px); height:clamp(34px,10vw,44px); font-size:16px; }
  #chatHomeIcon .chat-home-icon { width:50px; height:50px; }
}
@media (max-width:900px) { .calendar-widget { display:none; } }