/* ═══════════════════════════════════════════════════════════════
   Creative File Suite — full responsive system
   Fluid scaling covers every width between 320px–1920px+.
   Tuned for: 1920 1680 1536 1440 1366 1280 1180 1080 1050 1024
              966 926 900 864 844 823 820 812 800 786 768 740 736
              734 731 720 684 667 640 600 568 540 480 428 414 412
              411 393 390 384 375 360 320
   ═══════════════════════════════════════════════════════════════ */

:root{
  --rw-pad-x: clamp(6px, calc(6px + (100vw - 320px) * 0.011), 22px);
  --rw-pad-y: clamp(8px, calc(6px + (100vw - 320px) * 0.01), 24px);
  --rw-shell-max: min(1140px, 100%);
  --rw-content-pad: clamp(8px, calc(6px + (100vw - 320px) * 0.014), 26px);
  --rw-radius: clamp(11px, calc(10px + (100vw - 320px) * 0.005), 22px);
  --rw-gap: clamp(8px, calc(6px + (100vw - 320px) * 0.008), 18px);
  /* Keep hero title large enough to remain LCP (must not shrink below tool .info text) */
  --rw-hero-title: clamp(1.55rem, calc(1.2rem + 2.4vw), 2.6rem);
  --rw-h3: clamp(0.95rem, calc(0.9rem + 0.45vw), 1.2rem);
  --rw-btn-min: clamp(40px, calc(38px + 0.4vw), 48px);
  --rw-seo-col: clamp(200px, calc(160px + 12vw), 280px);
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body{
  overflow-x: clip;
  min-width: 0;
}

/* ── Site shell ── */
.site-wrap{
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
  padding-left: max(var(--rw-pad-x), env(safe-area-inset-left));
  padding-right: max(var(--rw-pad-x), env(safe-area-inset-right));
  box-sizing: border-box;
}
.site-wrap > main#main-content{
  width: 100%;
  min-width: 0;
  padding: 4px 0 clamp(16px, 3vw, 28px) !important;
  box-sizing: border-box;
}
.shell.shell--mega{
  width: 100%;
  max-width: var(--rw-shell-max) !important;
  margin: 0 auto;
  border-radius: var(--rw-radius) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
body.mega-open .shell.shell--mega{ overflow: visible !important; }
.shell.shell--mega .content{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: var(--rw-content-pad) !important;
  box-sizing: border-box;
  overflow-x: clip;
}

/* ── Universal overflow guard ── */
.panel, .glass, .tl-panel, .table-wrap, .code-box,
.collage-canvas-wrapper, .collage-editor-wrap, .video-tool-grid,
.seo-guide, .site-footer__tools, .mega-nav, .mega-nav__bar,
.mega-nav__search-bar, .drop, pre, code, textarea, input, select{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
img, video, canvas, svg, iframe{ max-width: 100%; height: auto; }

/* ── Tool panels ── */
.panel.active .glass{ animation: panelIn .35s ease; }
@keyframes panelIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.glass{ border-radius: clamp(12px, 1.4vw, 16px) !important; }
.panel h3, .glass h3{
  font-size: var(--rw-h3) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap;
}
.panel h3:hover i, .glass h3:hover i{ transform: none !important; }
.info{
  font-size: clamp(12px, 0.3vw + 11px, 14px) !important;
  line-height: 1.45 !important;
}
/* Keep first active-panel blurb from fighting hero for LCP / CLS */
.panel.active > .glass > p.info:first-of-type{
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* ── Hero — styled fully by site-hero.css (kept fluid via its own clamp) ── */
header.site-hero h1.site-hero__title{
  font-size: var(--rw-hero-title) !important;
}

/* ── SEO guide ── */
.seo-guide{
  margin-top: clamp(20px, 3vw, 36px);
  padding: 0 clamp(0px, 0.5vw, 4px);
}
.seo-guide h2, .seo-guide__heading{
  font-size: clamp(0.92rem, 0.4vw + 0.85rem, 1.1rem) !important;
  text-align: center;
  margin-bottom: 14px !important;
  line-height: 1.35 !important;
}
.seo-guide__grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rw-seo-col)), 1fr)) !important;
  gap: var(--rw-gap) !important;
}
.seo-guide article{
  border-radius: clamp(12px, 1.2vw, 14px) !important;
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 18px) !important;
}
.seo-guide article h3{
  font-size: clamp(11px, 0.25vw + 10px, 13px) !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  line-height: 1.35 !important;
}
.seo-guide article p{
  font-size: clamp(12px, 0.3vw + 11px, 14px) !important;
  line-height: 1.5 !important;
}
.seo-guide article:hover{ transform: none; }

/* ── Footer ── */
.site-bottom{
  max-width: var(--rw-shell-max) !important;
  width: 100% !important;
  margin: clamp(20px, 3vw, 32px) auto 0 !important;
  padding: 0 max(var(--rw-pad-x), env(safe-area-inset-right)) 0 max(var(--rw-pad-x), env(safe-area-inset-left)) !important;
}
.site-footer__tools{
  border-radius: clamp(12px, 1.4vw, 16px) !important;
  padding: clamp(14px, 2.5vw, 28px) !important;
}
.site-footer__categories{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(130px, 18vw, 180px)), 1fr)) !important;
  gap: clamp(16px, 2.5vw, 32px) clamp(18px, 3vw, 32px) !important;
}

/* ── Grids & tables ── */
.grid.two,
.video-tool-grid,
.template-grid,
.upscale-preview,
.wc-stats,
.video-meta,
.pxrem-preset-btns{ min-width: 0; }
.grid.two{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: var(--rw-gap) !important;
}
.video-tool-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(180px, 28vw, 240px)), 1fr)) !important;
}
.template-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(120px, 22vw, 180px)), 1fr)) !important;
}
.table-wrap{
  border-radius: 12px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.button, .case-op-btn, .tl-pill{
  min-height: var(--rw-btn-min);
}

/* ═══ ULTRA-WIDE ≥1920 (1920px) ═══ */
@media (min-width: 1920px){
  :root{ --rw-shell-max: min(1180px, 100%); }
  .site-wrap{ max-width: min(1400px, 100%); }
}

/* ═══ LARGE DESKTOP ≤1680 · 1536 ═══ */
@media (max-width: 1680px){
  .site-wrap{ max-width: min(1320px, 100%); }
}
@media (min-width: 1440px) and (max-width: 1680px){
  .shell.shell--mega, .site-bottom{ max-width: min(1160px, 100%) !important; }
}

/* ═══ DESKTOP ≤1440 · 1366 ═══ */
@media (max-width: 1440px){
  .site-wrap{ max-width: min(1240px, 100%); }
}
@media (max-width: 1366px){
  :root{ --rw-seo-col: clamp(190px, 24vw, 250px); }
}

/* ═══ LAPTOP ≤1280 · 1180 ═══ */
@media (max-width: 1280px){
  .site-wrap{ max-width: 100%; }
  .shell.shell--mega, .site-bottom{ max-width: min(1120px, 100%) !important; }
}
@media (max-width: 1180px){
  .seo-guide__grid{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
  }
}

/* ═══ SMALL LAPTOP ≤1080 · 1050 · 1024 ═══ */
@media (max-width: 1080px){
  .collage-editor__workspace{ grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px){
  .shell.shell--mega .content{ padding: clamp(10px, 1.6vw, 14px) !important; }
  .site-footer__categories{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ═══ TABLET ≤966 · 926 · 900 · 864 ═══ */
@media (max-width: 900px){
  .site-wrap > main#main-content{ padding: 0 0 18px !important; }
  .shell.shell--mega{ border-radius: clamp(14px, 2vw, 18px) !important; }
  .shell.shell--mega .content{ padding: clamp(10px, 1.5vw, 12px) !important; }
  .glass, .tl-panel, .table-wrap, .code-box{ padding: clamp(12px, 2vw, 16px) !important; }
  .grid.two{ grid-template-columns: 1fr !important; }
  .wc-stats, .video-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .case-op-btn{ flex: 1 1 calc(50% - 5px); min-width: 0; }
  .site-footer__categories{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .seo-guide{ margin-top: 22px; padding: 0; }
  .collage-template-grid{
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)) !important;
  }
}
@media (max-width: 864px){
  :root{ --rw-seo-col: 200px; }
}

/* ═══ TABLET PORTRAIT ≤844 · 823 · 820 · 812 · 800 · 786 ═══ */
@media (max-width: 844px){
  .site-footer__categories{ gap: 18px 20px !important; }
}
@media (max-width: 820px){
  .seo-guide__grid{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
  }
}
@media (max-width: 800px){
  .template-grid{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)) !important;
  }
}

/* ═══ SMALL TABLET ≤768 · 740 · 736 · 734 · 731 · 720 ═══ */
@media (max-width: 768px){
  .site-wrap > main#main-content{ padding: 0 0 16px !important; }
  .shell.shell--mega{ border-radius: clamp(13px, 2vw, 15px) !important; }
  .site-footer__tools{
    padding-bottom: clamp(22px, 4.5vw, 28px) !important;
  }
  .site-footer__faq{
    padding: clamp(26px, 5.5vw, 36px) clamp(10px, 2.5vw, 16px) clamp(10px, 2vw, 14px) !important;
    margin-top: clamp(4px, 1.5vw, 12px);
    gap: clamp(10px, 2.5vw, 14px) !important;
  }
  .site-footer__faq > h2{
    margin: 0 0 clamp(14px, 3.5vw, 20px) !important;
    padding-top: 0 !important;
    font-size: clamp(12px, 3.2vw, 13px) !important;
    line-height: 1.35 !important;
  }
}
@media (max-width: 720px){
  .video-tool-grid{ grid-template-columns: 1fr !important; }
}

/* ═══ LARGE PHONE ≤684 · 667 ═══ */
@media (max-width: 684px){
  .seo-guide__grid{ grid-template-columns: 1fr !important; }
}

/* ═══ PHONE ≤640 · 600 ═══ */
@media (max-width: 640px){
  body{ background-attachment: scroll !important; }
  .site-wrap{
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .shell.shell--mega{ border-radius: 14px !important; }
  .shell.shell--mega .content{ padding: 10px !important; }
  .glass, .tl-panel, .table-wrap, .code-box{
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .panel h3 > i, .glass h3 > i{
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
  .drop{ padding: clamp(16px, 5vw, 20px) 14px !important; }
  .drop i{ font-size: clamp(26px, 8vw, 30px) !important; }
  input:not(.mega-nav__search), select, textarea{
    font-size: 16px !important;
    padding: 12px !important;
  }
  .mega-nav__search{
    padding: 10px 0 !important;
    font-size: 16px !important;
  }
  .mega-nav__search-wrap{
    padding: 0 12px 0 10px !important;
  }
  .button, .case-op-btn, .tl-pill{
    min-height: 46px;
    font-size: 14px !important;
  }
  .wc-stats, .video-meta{ grid-template-columns: 1fr !important; }
  .case-op-btn{ flex: 1 1 100%; }
  .template-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .upscale-preview{ grid-template-columns: 1fr !important; }
  .seo-guide article{ padding: 16px !important; }
  .collage-editor__header-actions{ width: 100%; }
  .collage-editor__header-actions .button{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .collage-template-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 240px;
  }
  .site-footer__categories{
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 16px !important;
  }
  .site-footer__tools{
    padding: 16px 14px clamp(20px, 4vw, 24px) !important;
  }
  .site-footer__faq{
    padding-top: clamp(24px, 6vw, 32px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .site-footer__faq > h2{
    margin-bottom: 16px !important;
  }
  .site-footer__links{ grid-template-columns: 1fr !important; }
  .scroll-top-btn{
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 44px !important;
    height: 44px !important;
  }
  .tl-foot{ flex-direction: column; gap: 8px; }
  .tl-foot .button{ width: 100%; }
  .pxrem-preset-btns .button{ flex: 1 1 calc(50% - 4px); min-width: 0; }
  .seo-multilang__grid{ grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ═══ PHONE LANDSCAPE ≤600 · 568 · 540 ═══ */
@media (max-width: 600px){
  .site-footer__categories{ grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 568px){
  .site-hero .share-bar__btn{
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
  }
  .site-hero .share-bar__btn--copy{
    flex: 0 0 32px !important;
    width: 32px !important;
  }
}

/* ═══ SMALL PHONE ≤480 · 428 · 414 · 412 · 411 ═══ */
@media (max-width: 480px){
  .site-wrap{
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
  .shell.shell--mega{ border-radius: 12px !important; }
  .shell.shell--mega .content{ padding: 8px !important; }
  .glass, .tl-panel, .table-wrap, .code-box{
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .site-footer__categories{ grid-template-columns: 1fr !important; }
  .site-footer__faq{
    padding-top: 28px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .site-footer__faq > h2{
    margin-bottom: 14px !important;
  }
}

/* ═══ IPHONE ≤393 · 390 · 384 · 375 ═══ */
@media (max-width: 390px){
  .template-grid{ grid-template-columns: 1fr !important; }
}

/* ═══ EXTRA SMALL ≤360 · 320 ═══ */
@media (max-width: 360px){
  .site-footer__faq{
    padding-top: 24px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .site-footer__faq > h2{
    margin-bottom: 12px !important;
  }
  .button, .case-op-btn, .tl-pill{
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 320px){
  :root{
    --rw-pad-x: 5px;
    --rw-content-pad: 7px;
    --rw-radius: 10px;
  }
  .shell.shell--mega .content{ padding: 7px !important; }
  .glass, .tl-panel, .table-wrap, .code-box{ padding: 10px !important; }
  .drop{ padding: 14px 10px !important; }
  .mega-nav__brand-name{ font-size: 11px !important; }
}

/* ═══ LANDSCAPE PHONES (667 736 812 844 etc.) ═══ */
@media (max-height: 500px) and (orientation: landscape){
  .mega-nav__panel.is-open{ max-height: 100dvh; }
  .mega-nav__body{ max-height: calc(100dvh - 120px); }
  .shell.shell--mega .content{ padding: 8px !important; }
}

/* ═══ TOUCH DEVICES ═══ */
@media (hover: none) and (pointer: coarse){
  .button, .case-op-btn, .tl-pill, .nav-tool,
  .mega-nav__toggle, .mega-nav__search-hit, .share-bar__btn{
    min-height: 44px;
  }
  .site-hero .share-bar__btn{
    min-height: 32px !important;
    min-width: 32px !important;
  }
  .mega-nav__search-bar .mega-nav__search{ min-height: 44px; }
}

/* ── Legacy app.css overrides (loads before this file) ── */
@media (max-width: 900px){
  main#main-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 640px){
  .site-footer__faq{
    padding-top: clamp(24px, 6vw, 32px) !important;
  }
}
@media (max-width: 480px){
  .site-hero .share-bar__btn{
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  .site-hero .share-bar__btn--copy{
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .panel.active .glass, .seo-guide article, .drop, .button{
    animation: none !important;
    transition: none !important;
  }
}

/* ── Tool landing & legal pages ── */
.tool-landing, .seo-page, .legal-page main{
  max-width: min(800px, calc(100% - 20px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 640px){
  .tool-landing, .seo-page{
    padding: 22px 18px !important;
    margin: 12px 10px 40px !important;
    border-radius: 16px !important;
  }
  .tool-landing__header, .legal-page__header{ padding: 16px 14px 0 !important; }
  .tool-landing h1, .seo-page h1{ font-size: 1.35rem !important; }
  .tool-landing__cta{
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
}