/* EMKAN v106 — production polish pass requested after first live-host test.
   Kept as a final override layer so prior approved styling remains intact. */

/* 1 + 3) Header geometry: mobile menu toggle is optically centered under EMKAN;
   desktop gains equal breathing room on both sides after Account is injected. */
@media (min-width:901px){
  .site-header{max-width:780px!important}
  .nav-frame{min-height:36px!important}
  .primary-nav{padding-inline:88px!important}
  .nav-list{max-width:690px!important;gap:clamp(12px,1.35vw,19px)!important}
  .language-button{left:18px!important}
  .theme-button{right:18px!important}
  .nav-link[data-emkan-account]{margin-inline-start:4px!important}
}
@media (max-width:900px){
  .site-header .nav-frame{position:relative!important;grid-template-columns:48px minmax(0,1fr) 48px!important;grid-template-areas:"lang toggle theme" "nav nav nav"!important}
  .site-header .mobile-menu-button{
    position:absolute!important;left:50%!important;top:23px!important;
    transform:translate(-50%,-50%)!important;margin:0!important;justify-self:auto!important;z-index:3!important
  }
  .site-header .mobile-menu-icon{margin:0 auto!important}
  .site-header .language-button{justify-self:start!important;margin-left:7px!important}
  .site-header .theme-button{justify-self:end!important;margin-right:7px!important}
}

/* 5) Education detail cover: one large color image + three compact monochrome thumbnails. */
.v106-course-gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px;width:100%;aspect-ratio:16/9;margin:20px 0 34px;direction:ltr}
.v106-course-gallery-main{min-width:0;min-height:0;overflow:hidden;border:1px solid var(--line);background:var(--panel,var(--bg))}
.v106-course-gallery-main img{width:100%;height:100%;display:block;object-fit:cover;filter:none!important;transform:none!important;transition:opacity .22s ease}
.v106-course-gallery-main img.is-changing{opacity:.35}
.v106-course-gallery-thumbs{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
.v106-course-thumb{display:block;width:100%;height:100%;min-height:0;padding:0;border:1px solid var(--line);background:transparent;overflow:hidden;cursor:pointer}
.v106-course-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%)!important;transform:none!important;opacity:.82;transition:opacity .2s ease,border-color .2s ease}
.v106-course-thumb:is(:hover,:focus-visible,.is-active) img{filter:grayscale(100%)!important;opacity:1}
.v106-course-thumb:focus-visible{outline:1px solid var(--hover-accent);outline-offset:2px}
@media(max-width:700px){
  .v106-course-gallery{grid-template-columns:2fr 1fr;aspect-ratio:4/3;gap:6px;margin:14px 0 24px}
  .v106-course-gallery-thumbs{gap:6px}
}

/* 6) A single unambiguous course action. */
.v106-course-single-action{margin-top:40px!important}
.v106-course-single-action .v49-button{min-width:190px;text-align:center}

/* 8 + 11) Mobile landing pages stay two-column and media is color because touch has no hover state. */
@media(max-width:700px){
  body:is(.civil-page,.research-page,.content-page) .category-grid,
  .module-main .category-grid,
  .store-main .store-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:22px 12px!important;width:100%!important;max-width:none!important;justify-content:stretch!important;align-items:start!important
  }
  .module-main .category-card,.store-main .store-card{width:100%!important;min-width:0!important;margin:0!important}
  .module-main .category-square,.store-main .store-square{width:100%!important;aspect-ratio:1!important}
  .module-main .category-caption-text,.store-main .store-caption-text{font-size:9.6px!important;line-height:1.55!important}
}
@media(max-width:900px){
  :is(.category-card,.project-card,.store-card,.product-card,.v49-work-card,.research-index-card,.emkan-related-item) img,
  :is(.category-media,.category-square,.store-big,.store-small,.product-card-media,.v49-work-media,.research-index-media,.episode,.podcast-series-cover,.player-cover) img,
  .episode-cover,.podcast-series-cover,.player-cover,.dx-card-media,.v71-sample-visual img,.v73-sample-main img,.v73-sample-thumb img{
    filter:none!important;opacity:1!important
  }
}

/* 9) Detail pages with a single non-interactive hero image are always color. */
.research-entry-media img,.civil-entry-media img,.v49-person img,
.product-main .product-media img,.product-main .product-gallery-main img,
.article-entry-media img,.single-media img,.detail-media img{filter:none!important;opacity:1!important}

/* 13) Podcast transport remains one horizontal line on phones; play is first and speed is tap-to-cycle. */
.podcast-audio-line{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;direction:ltr!important;flex-direction:row!important;width:100%!important}
.podcast-audio-line .podcast-play-toggle{order:0!important;flex:0 0 28px!important}
.podcast-audio-line [data-current]{order:1!important}
.podcast-audio-line .podcast-seek{order:2!important;flex:1 1 auto!important;min-width:48px!important}
.podcast-audio-line [data-duration]{order:3!important}
.podcast-audio-line .podcast-speed-cycle{order:4!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 38px!important;min-width:38px!important}
@media(max-width:560px){
  .podcast-audio-line{gap:5px!important}
  .podcast-audio-line .podcast-time{display:inline!important;font-size:8px!important;white-space:nowrap!important}
  .podcast-audio-line .podcast-speed-cycle{min-width:34px!important;flex-basis:34px!important;font-size:8px!important}
}

/* 12) Real-image fallback injected by v106.js should behave exactly like native covers. */
.emkan-v106-fallback-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;z-index:0!important}
@media(min-width:901px){.emkan-v106-fallback-image{filter:grayscale(100%)!important}.category-card:hover .emkan-v106-fallback-image,.store-card:hover .emkan-v106-fallback-image,.product-card:hover .emkan-v106-fallback-image{filter:none!important}}
@media(max-width:900px){.emkan-v106-fallback-image{filter:none!important}}

/* General compatibility fallbacks for engines without color-mix / backdrop-filter. */
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .store-glass,.category-glass{background:rgba(247,248,250,.86)!important}
  html[data-theme="dark"] .store-glass,html[data-theme="dark"] .category-glass{background:rgba(17,20,25,.86)!important}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .store-glass,.category-glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}


/* v107 follow-up — instructor / mentor portraits remain true square frames. */
body.v90-education-item-page #contentApp .v49-person{
  grid-template-columns:96px minmax(0,1fr)!important;
  align-items:start!important;
}
body.v90-education-item-page #contentApp .v49-person :is(img,.v49-art){
  display:block!important;
  width:96px!important;
  min-width:96px!important;
  height:96px!important;
  min-height:96px!important;
  max-width:96px!important;
  max-height:96px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}
@media(max-width:560px){
  body.v90-education-item-page #contentApp .v49-person{grid-template-columns:82px minmax(0,1fr)!important;gap:14px!important}
  body.v90-education-item-page #contentApp .v49-person :is(img,.v49-art){
    width:82px!important;min-width:82px!important;height:82px!important;min-height:82px!important;max-width:82px!important;max-height:82px!important
  }
}