/* ================================================================
   STUDIOC77 — responsive.css  v5.0
   Bootstrap 5 handles grid/layout. This file only handles
   custom component overrides at each breakpoint.

   BREAKPOINTS (matching Bootstrap 5):
   xs  < 576px   — small phones
   sm  576–767px — large phones / landscape
   md  768–991px — tablets portrait
   lg  992–1199px — tablets landscape / small desktop
   xl  1200px+   — desktop
   xxl 1400px+   — large desktop
================================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LARGE DESKTOP (1400px+)
   Bigger section padding, more room for hero
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1400px) {
  :root { --py: 7rem; }
  .hero-content { padding: 150px 0 110px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP (1200px – 1399px)
   Slight badge position adjustment
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1200px) and (max-width: 1399px) {
  .about-exp-badge   { left: -10px; }
  .about-award-badge { right: -10px; bottom: -10px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET LANDSCAPE (992px – 1199px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --py: 5rem; }

  /* About block — badges don't have room to hang outside */
  .about-exp-badge   { left: 10px; top: 10px; }
  .about-award-badge { right: 10px; bottom: 10px; }

  /* Tighter card padding */
  .svc-card, .glass-card, .process-card { padding: 26px 22px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET PORTRAIT (768px – 991px)
   Two-column layouts, slightly smaller text
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --py: 4.5rem; }

  /* Hero */
  .hero-content { padding: 100px 0 64px; }
  .scroll-hint  { display: none; }

  /* About — badges don't have room, keep inside */
  .about-exp-badge   { display: none; }
  .about-award-badge { right: 10px; bottom: 10px; }
  .about-frame img   { height: 360px; }

  /* Why section — disable parallax on tablet (performance) */
  .why-bg { background-attachment: scroll; }

  /* Counters */
  .counter { font-size: 2.5rem; }

  /* CTA box */
  .cta-box { padding: 2rem; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LARGE PHONES / LANDSCAPE (576px – 767px)
   Center text, full-width buttons
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 576px) and (max-width: 767px) {
  :root { --py: 4rem; }

  /* Hero — centered text layout */
  .hero-content  { padding: 90px 0 60px; text-align: center; }
  .hero-badge    { font-size: 0.65rem; }
  .hero-stats    { justify-content: center; }
  .scroll-hint   { display: none; }

  /* Full-width hero buttons */
  .btn-gold, .btn-ghost { width: 100%; justify-content: center; }

  /* About */
  .about-frame img   { height: 300px; }
  .about-exp-badge   { display: none; }
  .about-award-badge { position: relative; right: auto; bottom: auto; margin-top: 16px; border-radius: 12px; }

  /* Why section — no parallax */
  .why-bg { background-attachment: scroll; }

  /* CTA */
  .cta-box { padding: 1.5rem; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMALL PHONES (max 575px)
   Single column, compact padding, touch-friendly
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 575px) {
  :root { --py: 3.5rem; }

  /* ── Navbar ── */
  .c77-nav .nav-link {
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    font-size: 0.9rem;
  }
  /* Hide topbar on mobile (no room) */
  .topbar { display: none !important; }

  /* ── Hero ── */
  .hero { min-height: 100svh; }
  .hero-content { padding: 80px 0 60px; text-align: center; }
  .hero-badge   { font-size: 0.64rem; }
  .hero-stats   { justify-content: center; flex-wrap: wrap; gap: 16px !important; }
  .stat-sep     { display: none; }
  .scroll-hint  { display: none; }
  /* Full-width buttons */
  .btn-gold, .btn-ghost { width: 100%; justify-content: center; padding: 13px 20px; }

  /* ── Marquee ── */
  .marquee-track span { font-size: 0.70rem; }

  /* ── About image ── */
  .about-frame img   { height: 280px; }
  .about-exp-badge   { display: none; }
  .about-award-badge { position: relative; right: auto; bottom: auto; margin-top: 14px; border-radius: 12px; }
  /* Center about content */
  .about-text  { text-align: center; }
  .about-text .feature-list li { text-align: left; }
  .about-text .d-flex.gap-3 { flex-direction: column; }
  .about-text .btn { width: 100%; justify-content: center; }

  /* ── Cards ── */
  .svc-card, .glass-card, .process-card,
  .milestone-card, .testi-card { padding: 24px 18px; }
  .counter      { font-size: 2.2rem; }
  .counter-plus { font-size: 1.6rem; }

  /* ── Video ── */
  .video-box { border-radius: var(--r-lg) !important; }
  .about-content-col { text-align: center; }
  .about-content-col .d-flex.gap-3 { flex-direction: column; }
  .about-content-col .btn { width: 100%; justify-content: center; }

  /* ── Portfolio ── */
  .filter-btn   { font-size: 0.70rem; padding: 6px 14px; }
  .port-card    { aspect-ratio: 1.1; }

  /* ── CTA ── */
  .cta-box { padding: 1.5rem 1rem; }
  .btn-whatsapp { width: 100%; justify-content: center; }

  /* ── Pricing ── */
  .pricing-card { padding: 1.5rem !important; }

  /* ── Footer ── */
  .footer-top   { padding: 48px 0 32px; }

  /* ── Floating buttons ── */
  #btt    { bottom: 84px; right: 16px; }
  #wa-fab { right: 16px; bottom: 24px; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EXTRA SMALL (max 360px)
   Oldest/smallest Android phones
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 360px) {
  .hero-content { padding: 70px 0 50px; }
  .hero h1      { font-size: 1.5rem !important; }
  .counter      { font-size: 1.9rem; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HIGH DPI / RETINA (image sharpness)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .about-frame img, .video-box img { image-rendering: -webkit-optimize-contrast; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRINT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  /* Hide non-essential elements */
  .c77-header, .topbar, .hero-video, .hero-overlay, .hero-ptcl,
  .scroll-hint, .marquee-strip, #wa-fab, #btt, #preloader { display: none !important; }

  body { background: #fff; color: #000; }
  a    { color: #000; }

  /* Make hero readable when printed */
  .hero { background: var(--navy) !important; min-height: auto; padding: 40px 0; }

  /* Flatten dark sections for print */
  .svc-card, .glass-card, .process-card {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
  }

  /* Fix gradient text for print */
  .txt-gold { -webkit-text-fill-color: var(--gold-dark) !important; }
}