/* =====================================================
   TRANSLUCID — Subpages Responsive
   Comprehensive responsive styles for Documentation,
   Playground, Blog, Footer, and Nav-2 across all sizes.
   ===================================================== */

/* ══════════════════════════════════════════════════
   FOOTER — Full Responsive
   ══════════════════════════════════════════════════ */
@media(max-width:1023px){
  .site-footer{padding:40px 32px 0}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-nav{grid-template-columns:repeat(3,1fr);gap:24px}
  .footer-tagline{font-size:13px;max-width:100%}
}
@media(max-width:767px){
  .site-footer{padding:32px 16px 0}
  .footer-top{gap:24px}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:20px}
  .footer-tagline{font-size:12px}
  .footer-link{font-size:12px}
  .footer-col-title{font-size:8px;letter-spacing:2px;margin-bottom:12px}
  .footer-logo-mark{width:24px;height:24px}
  .footer-logo-text-img{height:15px}
  .footer-bottom{flex-direction:column;text-align:center;gap:8px;padding:16px 0}
  .footer-copy{font-size:10px}
  .footer-status{font-size:9px}
}
@media(max-width:479px){
  .site-footer{padding:24px 12px 0}
  .footer-top{gap:20px}
  .footer-nav{grid-template-columns:1fr 1fr;gap:16px}
  .footer-link{font-size:11px}
  .footer-tagline{font-size:11px}
  .footer-logo-mark{width:22px;height:22px}
  .footer-logo-text-img{height:13px}
  .footer-bottom{padding:14px 0}
}

/* ══════════════════════════════════════════════════
   NAV-2 — Enhanced Mobile (handled in nav-2.css)
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   DOCUMENTATION — Full Responsive
   ══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1023px){
  .doc-layout{grid-template-columns:180px 1fr}
  #docContent{padding:24px 28px}
  .doc-h2{font-size:20px}
  .doc-p{font-size:13.5px}
  .doc-table{font-size:12px}
  .doc-table th,.doc-table td{padding:8px 10px}
  .doc-code pre{font-size:12px;padding:14px}
  .doc-callout{padding:14px 16px;font-size:12.5px}
  .doc-method code{font-size:13px}
}

/* Mobile */
@media(max-width:767px){
  .doc-layout{grid-template-columns:1fr!important;display:flex;flex-direction:column}
  #docNav{display:none!important}
  #docContent{padding:20px 20px!important;max-width:100%!important;overflow-x:hidden!important;margin:0!important;box-sizing:border-box!important}
  .doc-h2{font-size:clamp(18px,4.5vw,22px)}
  .doc-h3{font-size:10px;letter-spacing:1.5px;margin:16px 0 8px}
  .doc-p{font-size:clamp(12.5px,3vw,14px);line-height:1.7}
  .doc-p code{font-size:11px;padding:1px 5px}
  .doc-callout{padding:12px 14px;font-size:12px;line-height:1.7;border-radius:6px}
  .doc-callout code{font-size:10.5px}
  .doc-method{flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .doc-method code{font-size:12px;word-break:break-all}
  .method-post,.method-get,.method-patch,.method-delete{font-size:9px;padding:2px 7px}
  .doc-table{font-size:11px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .doc-table th,.doc-table td{padding:8px;white-space:nowrap}
  .doc-table th{font-size:9px;letter-spacing:1px}
  .doc-code{border-radius:8px;margin:10px 0 16px}
  .doc-code-header{padding:6px 12px;font-size:9px;letter-spacing:1.5px}
  .doc-code pre{font-size:11px;padding:12px;line-height:1.0;word-break:break-all;white-space:pre-wrap}
}

/* Small phones */
@media(max-width:479px){
  #docContent{padding:16px 16px!important;box-sizing:border-box!important}
  .doc-h2{font-size:clamp(16px,5vw,20px)}
  .doc-p{font-size:clamp(12px,3.2vw,13px)}
  .doc-callout{padding:10px 12px;font-size:11.5px}
  .doc-code pre{font-size:10px;padding:10px}
  .doc-table td code{font-size:10px;padding:1px 4px}
  .doc-method code{font-size:11px}
  #docContent section{margin-top:28px!important}
}

/* ══════════════════════════════════════════════════
   PLAYGROUND — Full Responsive
   ══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1023px){
  .pg-sidebar{width:160px!important}
  .pg-sidebar-link{font-size:11px!important;padding:6px 12px!important}
}

/* Mobile */
@media(max-width:767px){
  /* API Key bar */
  .pg-layout{flex-direction:column!important;min-height:auto!important}

  /* Make the API key bar stack */
  [style*="border-bottom:1px solid var(--border)"][style*="padding:8px 20px"][style*="display:flex"][style*="align-items:center"][style*="gap:12px"]{
    flex-wrap:wrap!important;
    padding:10px 12px!important;
    gap:8px!important;
  }
  [style*="border-bottom:1px solid var(--border)"][style*="padding:8px 20px"] label{
    font-size:10px!important;
  }
  [style*="border-bottom:1px solid var(--border)"][style*="padding:8px 20px"] [style*="max-width:480px"]{
    max-width:100%!important;
    flex:1 1 100%!important;
  }
  [style*="border-bottom:1px solid var(--border)"][style*="padding:8px 20px"] input{
    font-size:11px!important;
  }
  #keyStatus{font-size:10px!important}
  #apiStatus{font-size:10px!important;margin-left:0!important}

  /* Sidebar becomes horizontal scrollable tabs */
  .pg-sidebar{
    width:100%!important;
    border-right:none!important;
    border-bottom:1px solid var(--border)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    display:flex!important;
    flex-direction:row!important;
    padding:8px 12px!important;
    gap:4px!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pg-sidebar::-webkit-scrollbar{display:none}
  .pg-sidebar p{display:none!important}
  .pg-sidebar-link{
    display:inline-flex!important;
    padding:8px 14px!important;
    font-size:11px!important;
    border-left:none!important;
    border-radius:6px!important;
    flex-shrink:0!important;
    white-space:nowrap!important;
  }
  .pg-sidebar-link.active{
    background:var(--accent-bg)!important;
    color:var(--accent)!important;
  }

  /* API bar */
  .pg-api-bar{
    flex-wrap:wrap!important;
    padding:10px 12px!important;
    gap:8px!important;
  }
  .pg-api-bar>div:first-child{width:100%}
  .pg-api-bar button{width:100%;justify-content:center}
  .pg-api-bar [style*="font-size:13px"]{font-size:12px!important;word-break:break-all}
  .pg-api-bar [style*="font-size:11px"]{font-size:10px!important}

  /* Main tabs */
  .main-tab{font-size:11px!important;padding:8px 0!important}

  /* Tab content */
  #panelFeatures{padding:14px 20px!important;box-sizing:border-box!important}
  #panelCode>div:first-child{padding:6px 20px!important}
  #panelCode>div:last-child{padding:14px 20px!important;box-sizing:border-box!important}
  .code-block{font-size:11px!important;padding:12px!important;box-sizing:border-box!important;line-height:1.0!important}
  #panelResponse{padding:14px 20px!important;box-sizing:border-box!important}
  #panelResponse pre{font-size:11px!important;padding:12px!important;box-sizing:border-box!important;word-wrap:break-word!important;white-space:pre-wrap!important;line-height:1.0!important}

  /* Features form elements */
  #featuresContent label{font-size:12px!important}
  #featuresContent select,
  #featuresContent input[type="text"],
  #featuresContent input[type="url"],
  #featuresContent input[type="number"]{
    font-size:12px!important;
    padding:8px 10px!important;
  }
  .param-tag{font-size:10px!important}

  /* Lang tabs */
  .lang-tab{font-size:10px!important;padding:4px 10px!important}
}

/* Small phones */
@media(max-width:479px){
  .pg-sidebar-link{padding:6px 10px!important;font-size:10px!important}
  .pg-api-bar [style*="font-size:13px"]{font-size:11px!important}
  .code-block{font-size:10px!important;padding:10px!important}
  #panelFeatures{padding:12px 10px!important}
  .main-tab{font-size:10px!important}
}

/* ══════════════════════════════════════════════════
   BLOG — Full Responsive
   ══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1023px){
  .hero{padding:60px 32px 40px}
  .hero h1{font-size:clamp(28px,4vw,42px)}
  .hero p{font-size:15px}
  .blog-section{padding:40px 32px}
  .featured{padding:24px}
  .featured-title{font-size:clamp(22px,3.5vw,32px)}
  .featured-excerpt{font-size:15px}
  .blog-card{padding:18px}
  .blog-card-title{font-size:16px}
  .blog-card-excerpt{font-size:12.5px}
  .article-view{padding:48px 32px}
  .article-title{font-size:clamp(24px,3.5vw,36px)}
  .article-content{font-size:16px}
  .article-content h2{font-size:22px}
  .more-articles{padding:40px 32px}
  .more-articles h3{font-size:22px;margin-bottom:24px}
  .newsletter{padding:60px 32px}
  .newsletter h2{font-size:clamp(22px,3vw,28px)}
  .newsletter p{font-size:14px}
  .newsletter-form{flex-direction:row;max-width:400px}
  .newsletter-input{font-size:13px;padding:12px 16px}
  .newsletter-btn{font-size:13px;padding:12px 22px}
}

/* Mobile */
@media(max-width:767px){
  .hero{padding:40px 20px 32px}
  .hero h1{font-size:clamp(22px,5.5vw,32px)}
  .hero p{font-size:14px;max-width:100%}
  .hero-tag{font-size:10px;letter-spacing:2.5px;margin-bottom:14px}
  .blog-section{padding:32px 16px}
  .featured{padding:20px;border-radius:12px;margin-bottom:36px}
  .featured-badge{font-size:9px;padding:4px 8px;margin-bottom:10px}
  .featured-meta{gap:8px;margin-bottom:12px}
  .featured-category{font-size:10px}
  .featured-date{font-size:11px}
  .featured-title{font-size:clamp(18px,4.5vw,26px);margin-bottom:12px}
  .featured-excerpt{font-size:14px;line-height:1.65}
  .blog-grid{gap:20px}
  .blog-card{padding:16px;border-radius:10px}
  .blog-card-category{font-size:8px;padding:3px 8px}
  .blog-card-date{font-size:10px;margin-bottom:6px}
  .blog-card-title{font-size:15px;margin-bottom:8px}
  .blog-card-excerpt{font-size:12px;line-height:1.55}

  /* Article view */
  .article-view{padding:32px 16px}
  .back-btn{padding:8px 14px;font-size:12px;margin-bottom:28px;border-radius:6px}
  .back-btn svg{width:14px;height:14px}
  .article-header{margin-bottom:28px}
  .article-category{font-size:10px;letter-spacing:0.8px}
  .article-title{font-size:clamp(20px,5vw,30px);margin:12px 0}
  .article-meta{gap:10px;font-size:12px;flex-wrap:wrap}
  .article-content{font-size:15px;line-height:1.75}
  .article-content h2{font-size:20px;margin:28px 0 12px}
  .article-content p{margin-bottom:18px}
  .article-content ul,.article-content ol{padding-left:20px}
  .article-content li{margin-bottom:10px;font-size:14px}
  .article-callout{padding:18px;margin:24px 0;border-radius:10px}
  .article-callout h4{font-size:13px;margin-bottom:10px}
  .article-callout p{font-size:14px}
  .article-callout-accent{padding:18px;margin:24px 0;border-radius:10px}
  .article-callout-accent h4{font-size:13px;margin-bottom:10px}
  .article-callout-accent p{font-size:14px}
  .article-footer{padding-top:24px;margin-top:36px}
  .article-footer p{font-size:13px}

  /* More articles */
  .more-articles{padding:32px 16px}
  .more-articles h3{font-size:20px;margin-bottom:20px}

  /* Newsletter */
  .newsletter{padding:48px 16px}
  .newsletter h2{font-size:clamp(20px,5vw,26px)}
  .newsletter p{font-size:13px;margin-bottom:20px}
  .newsletter-form{flex-direction:column;gap:10px;max-width:100%}
  .newsletter-input{padding:12px 16px;font-size:14px;border-radius:8px}
  .newsletter-btn{padding:12px 20px;font-size:14px;border-radius:8px;width:100%}
}

/* Small phones */
@media(max-width:479px){
  .hero{padding:28px 12px 24px}
  .hero h1{font-size:clamp(18px,6vw,26px)}
  .hero p{font-size:13px}
  .hero-tag{font-size:9px;letter-spacing:2px;margin-bottom:12px}
  .blog-section{padding:24px 12px}
  .featured{padding:16px;border-radius:10px;margin-bottom:28px}
  .featured-title{font-size:clamp(16px,5vw,22px)}
  .featured-excerpt{font-size:13px}
  .blog-card{padding:14px;border-radius:8px}
  .blog-card-title{font-size:14px}
  .blog-card-excerpt{font-size:11.5px}
  .article-view{padding:24px 12px}
  .article-title{font-size:clamp(18px,5.5vw,24px)}
  .article-content{font-size:14px}
  .article-content h2{font-size:18px;margin:24px 0 10px}
  .article-content li{font-size:13px}
  .article-callout{padding:14px}
  .article-callout-accent{padding:14px}
  .more-articles{padding:24px 12px}
  .more-articles h3{font-size:18px}
  .newsletter{padding:36px 12px}
  .newsletter h2{font-size:clamp(18px,6vw,24px)}
  .newsletter-input{font-size:13px;padding:10px 14px}
  .newsletter-btn{font-size:13px;padding:10px 16px}
}

/* ══════════════════════════════════════════════════
   SDK — Full Responsive
   ══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1023px){
  .code-section{padding:60px 32px}
  .code-grid{gap:24px}
  .code-title{font-size:clamp(24px,3vw,34px)}
  .code-body{padding:18px;font-size:12px}
  .features{padding:60px 32px}
  .feature-card{padding:22px}
  .feature-title{font-size:16px}
  .feature-desc{font-size:13px}
  .policies{padding:60px 32px}
  .policy-card{padding:16px 20px}
  .policy-title{font-size:14px}
  .policy-desc{font-size:12px}
}

/* Mobile */
@media(max-width:767px){
  .code-section{padding:40px 16px}
  .code-grid{grid-template-columns:1fr!important;gap:20px}
  .code-header{margin-bottom:24px}
  .code-tag{font-size:9px;letter-spacing:2px;margin-bottom:10px}
  .code-title{font-size:clamp(20px,5vw,28px)}
  .code-tabs{padding:0 12px}
  .code-tab{padding:10px 12px;font-size:11px}
  .code-body{padding:14px;font-size:11.5px;line-height:1.7}
  .preview-card{border-radius:10px}
  .preview-header{padding:10px 14px;font-size:11px}
  .preview-badge{top:16px;right:12px;font-size:8px;padding:4px 8px}
  .features{padding:40px 16px}
  .features-grid{grid-template-columns:1fr!important;gap:16px}
  .feature-card{padding:20px;border-radius:10px}
  .feature-icon{width:36px;height:36px;border-radius:8px;margin-bottom:12px}
  .feature-icon svg{width:18px;height:18px}
  .feature-title{font-size:15px;margin-bottom:6px}
  .feature-desc{font-size:13px;margin-bottom:12px}
  .feature-link{font-size:12px}
  .policies{padding:40px 16px}
  .policies-header{margin-bottom:32px}
  .policies-grid{grid-template-columns:1fr!important;gap:12px}
  .policy-card{padding:16px;border-radius:8px;gap:12px}
  .policy-icon{width:32px;height:32px;border-radius:6px}
  .policy-icon svg{width:16px;height:16px}
  .policy-title{font-size:14px}
  .policy-desc{font-size:12px}
  .hero-btns{flex-direction:column;align-items:center;gap:10px}
  .btn-primary,.btn-secondary{width:100%;max-width:300px;justify-content:center;font-size:13px;padding:10px 20px}
}

/* Small phones */
@media(max-width:479px){
  .code-section{padding:28px 12px}
  .code-title{font-size:clamp(18px,5.5vw,24px)}
  .code-body{font-size:10.5px;padding:12px}
  .code-tab{font-size:10px;padding:8px 10px}
  .features{padding:28px 12px}
  .feature-card{padding:16px}
  .feature-title{font-size:14px}
  .feature-desc{font-size:12px}
  .policies{padding:28px 12px}
  .policy-card{padding:14px}
}

/* ══════════════════════════════════════════════════
   USE CASES (standalone page) — Full Responsive
   ══════════════════════════════════════════════════ */

/* Tablet */
@media(max-width:1023px){
  .categories{gap:6px;margin-bottom:60px}
  .cat-btn{padding:8px 16px;font-size:12px}
  .uc-section{padding:60px 32px}
  .uc-header{gap:16px;margin-bottom:36px}
  .uc-icon{width:48px;height:48px;border-radius:12px}
  .uc-icon svg{width:24px;height:24px}
  .uc-header-text h2{font-size:clamp(24px,3vw,32px)}
  .uc-header-text p{font-size:15px}
  .uc-grid{gap:32px}
  .uc-feature-text h4{font-size:14px}
  .uc-feature-text p{font-size:13px}
  .testimonial{padding:20px}
  .testimonial-quote{font-size:14px}
  .cta{padding:80px 32px}
  .cta h2{font-size:clamp(28px,3.5vw,40px)}
  .cta p{font-size:15px}
}

/* Mobile */
@media(max-width:767px){
  .categories{gap:6px;margin-bottom:40px;padding:0 8px}
  .cat-btn{padding:7px 14px;font-size:11px}
  .uc-section{padding:40px 16px}
  .uc-header{flex-direction:column;gap:12px;margin-bottom:28px}
  .uc-icon{width:42px;height:42px;border-radius:10px}
  .uc-icon svg{width:22px;height:22px}
  .uc-header-text h2{font-size:clamp(20px,5vw,28px)}
  .uc-header-text p{font-size:14px}
  .uc-grid{grid-template-columns:1fr!important;gap:24px}
  .uc-grid.reverse{direction:ltr}
  .uc-content{gap:18px}
  .uc-feature{gap:12px}
  .uc-feature-icon{width:36px;height:36px;border-radius:8px}
  .uc-feature-icon svg{width:16px;height:16px}
  .uc-feature-text h4{font-size:14px}
  .uc-feature-text p{font-size:13px}
  .uc-visual{border-radius:12px}
  .uc-badge{top:10px;right:10px;padding:6px 10px;font-size:9px;border-radius:6px}
  .testimonial{padding:18px;margin-top:24px;border-radius:10px}
  .testimonial-quote{font-size:14px;margin-bottom:12px}
  .testimonial-avatar{width:36px;height:36px;font-size:13px}
  .testimonial-info h5{font-size:12px}
  .testimonial-info p{font-size:11px}
  .cta{padding:60px 16px}
  .cta h2{font-size:clamp(22px,5vw,32px);margin-bottom:16px}
  .cta p{font-size:14px;margin-bottom:28px}
  .cta-btns{flex-direction:column;align-items:center;gap:10px}
  .cta .btn-primary,.cta .btn-secondary{width:100%;max-width:300px;justify-content:center;font-size:14px;padding:12px 24px}
}

/* Small phones */
@media(max-width:479px){
  .categories{margin-bottom:32px}
  .cat-btn{padding:6px 12px;font-size:10px}
  .uc-section{padding:32px 12px}
  .uc-header-text h2{font-size:clamp(18px,5.5vw,24px)}
  .uc-header-text p{font-size:13px}
  .uc-feature-text h4{font-size:13px}
  .uc-feature-text p{font-size:12px}
  .testimonial{padding:14px}
  .testimonial-quote{font-size:13px}
  .cta{padding:48px 12px}
  .cta h2{font-size:clamp(20px,6vw,28px)}
  .cta p{font-size:13px}
}

/* ══════════════════════════════════════════════════
   TOUCH TARGETS — All subpages
   ══════════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  .nav-2-hamburger{min-height:44px;min-width:44px;justify-content:center;align-items:center}
  .nav-2-link{min-height:44px;padding:12px 14px}
  .nav-2-mobile-link{min-height:44px}
  .doc-nav-link{min-height:40px;display:flex;align-items:center}
  .pg-sidebar-link{min-height:40px!important}
  .blog-card{min-height:44px}
  .back-btn{min-height:44px}
  .newsletter-btn{min-height:44px}
  .newsletter-input{min-height:44px}
  .footer-link{min-height:36px;display:flex;align-items:center}
}