/* components.css - cards, buttons and common components */
.card{background:var(--card-bg);padding:18px;border-radius:12px}
.cta{display:inline-block;margin-right:10px;padding:10px 14px;border-radius:8px;background:var(--accent);color:#042023;text-decoration:none;font-weight:600}
.subhead{font-size:1.05rem;margin-top:6px}
.accent{color:var(--accent)}
button.accent{
  background: var(--bg-top);
  color: var(--accent);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
}
/* Site brand/title using Orbitron */
.site-brand{font-family:'Orbitron', 'PublicAV-Display', sans-serif;font-size:1.05rem;letter-spacing:0.4px}
.site-brand{color:var(--accent)}

/* Avatar (circular) */
.avatar-wrap{display:inline-block;padding:8px;border-radius:50%;background:linear-gradient(135deg, rgba(110,231,183,0.10), rgba(4,32,35,0.08));box-shadow:0 8px 22px rgba(2,6,23,0.6);margin:12px 0}
.avatar{width:100%;max-width:320px;height:320px;border-radius:50%;object-fit:cover;display:block}

/* Utility spacing helpers */
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}

/* Section headings */
.section-heading{margin-top:12px}

/* Muted lists with left indent */
.list-muted{margin:8px 0 0 18px;color:var(--muted)}

/* Organization logos */
.org-logo{border-radius:10px;display:inline-block;overflow:hidden;margin-right:8px;vertical-align:middle;max-width:100%;height:auto;width:auto;max-height:120px;object-fit:contain}

@media (max-width:540px){
  .org-logo{max-height:48px}
}

/* Hero with particle background */
.hero{position:relative;overflow:hidden;padding:3rem 1rem;background:transparent}
.hero .card{position:relative;z-index:3}
.hero .muted{position:relative;z-index:3}
.hero-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1;pointer-events:none}
.hero::before{content:'';position:absolute;inset:0;background:var(--bg-top);z-index:0;pointer-events:none}

/* Hero inner content sits above canvas */
.hero-inner{position:relative;z-index:3;max-width:var(--max-width);margin:0 auto;padding:1.5rem 1rem;text-align:center;color:var(--text)}
.hero-inner h1{margin:0 0 0.4rem}

/* Site logo inside .site-brand */
.site-brand img.site-logo{height:40px;max-height:44px;display:block}

/* ------------------------------------------------------------------------------------------- */

/* Global responsive media rules to prevent overflow on mobile */
img, picture, video, embed, object { max-width: 100%; height: auto; display: block; }

/* Target iframes placed inside padding-bottom wrappers (responsive embed trick).
   This makes them fill the wrapper instead of overflowing when width attributes exist. */
.card > div[style*="padding-bottom"] iframe,
.card iframe[loading="lazy"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ensure containers and flex children can shrink on small screens */
.udemy-courses { min-width: 0; }
.udemy-course { min-width: 0; }


/* Responsive fixes to prevent overflow on mobile */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Avoid 100vw causing horizontal scroll */
.hero-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Responsive logo */
.site-brand img.site-logo {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure grids and containers can shrink */
.hero { min-width: 0; }
.wrap { box-sizing: border-box; }

/* Videos */
.videos-grid, .video-item { max-width: 100%; min-width: 0; }
.video-item iframe { width: 100%; height: auto; aspect-ratio: 16/9; }

/* Tables: allow horizontal scroll instead of breaking layout */
.card > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card table { width: 100%; min-width: 0; table-layout: auto; }
.card td, .card th { word-break: break-word; hyphens: auto; }

/* Videos grid for XR demos */
.videos-grid{display:grid;gap:1rem;margin-top:12px}
.video-item{background:transparent}
.video-item iframe{width:100%;height:auto;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden}

/* AR: three columns on desktop, two on tablet, one on mobile */
.videos-grid.three-columns{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){
  .videos-grid.three-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .videos-grid.three-columns{grid-template-columns:1fr}
}

/* VR & Apps: two columns on desktop/tablet, one on mobile */
.videos-grid.two-columns{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .videos-grid.two-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .videos-grid.two-columns{grid-template-columns:1fr}
}
/* ------------------------------------------------------------------------------------------- */