/* ==========================================================================
   RESPONSIVE.CSS — All Breakpoints & Accessibility Queries
   Ulises Paiz Portfolio — Dark Cinematic Theme
   ========================================================================== */


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  TABLET — max-width: 900px                                          ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {

  /* --- Section & Layout --- */
  .section {
    padding: 5rem 1.5rem;
  }

  .chapter-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .chapter-content.reverse {
    direction: ltr;
  }

  .chapter-visual {
    order: -1;
  }

  .chapter-number-bg {
    font-size: clamp(5rem, 14vw, 10rem);
  }

  /* --- Navigation --- */
  .nav {
    padding: 1rem 1.5rem;
  }

  .nav.visible {
    padding: 0.75rem 1.5rem;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* --- Chapter Nav Dots --- */
  .chapter-nav {
    right: 0.75rem;
  }

  .chapter-dot-label {
    display: none;
  }

  /* --- Badges Grid --- */
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .badge {
    padding: 1.5rem 1rem;
  }

  /* --- Ghosxt Screenshot --- */
  .ghosxt-screenshot {
    max-width: 100%;
  }

  .founder-portrait {
    max-width: 250px;
    margin: 0 auto 2rem;
  }

  /* --- Pull Quotes --- */
  .pull-quote {
    font-size: 1.05rem;
    padding-left: 1rem;
  }

  /* --- Metrics Bar --- */
  .metrics-bar {
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }

  /* --- Chapter wipes — simplify --- */
  .chapter-wipe {
    min-height: 15vh;
  }

  .wipe-number {
    display: none;
  }

  /* --- Cinematic Quotes --- */
  .cinematic-quote {
    height: auto;
    min-height: auto;
    padding: 4rem 1.5rem;
  }

  .cq-text {
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  }

  .cq-text .cq-word {
    opacity: 1 !important;
  }

  .cq-attribution {
    opacity: 1 !important;
  }

  /* --- Story Blocks --- */
  .story-block.left,
  .story-block.right {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .story-block {
    margin-bottom: 3rem;
  }

  /* --- Coach --- */
  .coach-images {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* --- Gauntlet --- */
  .gauntlet-roles {
    gap: 1rem;
  }

  .gauntlet-role {
    padding: 1.25rem;
  }

  .terminal {
    max-width: 100%;
  }

  /* --- Conversion --- */
  .conversion-final {
    padding: 4rem 1.5rem;
  }

  /* --- Ghosxt Card --- */
  .ghosxt-card-brand { font-size: 2.8rem; }
  .ghosxt-card-content { padding: 2rem 1.5rem 1.2rem; }
  .ghosxt-radar { width: 220px; height: 220px; }
  .coach-images { grid-template-columns: 1fr; }
  .coach-images .section-image:last-child:nth-child(odd) { max-width: 100%; }
  .play-diagram { margin: 2rem auto 0; }

  .services-grid {
    grid-template-columns: 1fr;
  }

  /* --- Blueprint Grid --- */
  .blueprint-grid {
    background-size: 40px 40px;
  }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  MOBILE — max-width: 600px                                          ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 600px) {

  /* --- Section & Layout --- */
  .section {
    padding: 4rem 1rem;
    min-height: auto;
  }

  .container {
    padding: 0;
  }

  /* --- Hero --- */
  .hero {
    padding: 0 1rem;
  }

  .hero-title {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }

  .hero-pre {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
  }

  .hero-subtitle {
    font-size: 0.65rem;
  }

  .hero-scroll-cta {
    bottom: 2rem;
  }

  /* --- Chapter Text --- */
  .chapter-text h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .chapter-text p {
    font-size: 1rem;
  }

  .chapter-label {
    font-size: 0.6rem;
  }

  .chapter-number-bg {
    font-size: clamp(4rem, 12vw, 7rem);
  }

  /* --- Terminal --- */
  .terminal-body {
    padding: 1rem;
    font-size: 0.6rem;
  }

  .terminal-header {
    padding: 0.6rem 0.75rem;
  }

  .terminal-dot {
    width: 6px;
    height: 6px;
  }

  /* --- Case File --- */
  .case-file {
    padding: 1.5rem;
  }

  .case-file::before {
    font-size: 3rem;
  }

  .case-file-row {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0;
  }

  .degree-photo {
    max-width: 280px;
    margin: 2rem auto;
  }

  /* --- Badges --- */
  .badges-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .badge {
    padding: 1.25rem 1rem;
  }

  /* --- Footer --- */
  .footer-minimal {
    padding: 3rem 1rem 1.5rem;
  }

  .footer-minimal-links {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .footer-minimal::before {
    font-size: clamp(3rem, 10vw, 6rem);
  }

  /* --- Founder --- */
  .founder-portrait {
    max-width: 200px;
  }

  /* --- Conversion --- */
  .conversion-final {
    padding: 3rem 1rem;
  }

  .conversion-final-headline {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .conversion-final-sub {
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  }

  .conversion-final-cta {
    font-size: 0.7rem;
    padding: 0.85rem 2rem;
  }

  /* --- Metrics --- */
  .metrics-bar {
    gap: 1.5rem;
  }

  .metric-number {
    font-size: 2rem;
  }

  .metric-label {
    font-size: 0.55rem;
  }

  /* --- HP Pavilion --- */
  .hp-pavilion {
    max-width: 300px;
  }

  .hp-screen-content {
    padding: 1rem;
    min-height: 130px;
  }

  .hp-myspace-line {
    font-size: 0.55rem;
  }

  /* --- Pull Quotes --- */
  .pull-quote {
    font-size: 0.95rem;
    padding-left: 0.75rem;
    margin: 1.5rem 0;
  }

  /* --- Cinematic Quotes --- */
  .cinematic-quote {
    height: auto;
    min-height: auto;
    padding: 3rem 1rem;
  }

  .cq-text {
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  .cq-mark {
    font-size: clamp(4rem, 12vw, 7rem);
  }

  /* --- Gauntlet --- */
  .gauntlet-role {
    flex: 1 1 100%;
  }

  /* --- Ghosxt Card --- */
  .ghosxt-card-brand { font-size: 2.2rem; letter-spacing: 0.12em; }
  .ghosxt-card-content { padding: 1.5rem 1.2rem 1rem; }
  .ghosxt-cta { font-size: 0.6rem; padding: 0.85rem 1.5rem; }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .service-item {
    padding: 1rem;
  }

  .hero-value-prop {
    font-size: 0.9rem;
  }

  .back-to-top {
    width: 44px;
    height: 44px;
  }

  .conversion-final-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer-minimal-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .conversion-secure-label {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
  }

  .conversion-classification {
    font-size: 0.45rem;
  }

  .footer-classification {
    font-size: 0.45rem;
  }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  TOUCH DEVICES — pointer: coarse                                    ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

@media (pointer: coarse) {

  a,
  button,
  [role="button"] {
    cursor: pointer;
  }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  REDUCED MOTION — Accessibility                                     ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce) {

  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Grain overlay — disable movement */
  .grain-overlay {
    animation: none;
  }

  /* Reset reveals to visible */
  .reveal-up,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }

  .word-accent .char {
    opacity: 1;
    transform: none;
  }

  /* Loader — instant */
  .loader {
    transition: none;
  }

  /* Scan line — static */
  .scan-line {
    animation: none;
    display: none;
  }

  /* Cursor blink — static */
  .blink-cursor {
    animation: none;
    opacity: 1;
  }

  /* Terminal cursor — static */
  .terminal-cursor {
    animation: none;
    opacity: 1;
  }

  /* Simplify hover transforms */
  .badge:hover,
  .gauntlet-role:hover,
  .degree-photo:hover {
    transform: none;
  }

  /* Ghosxt card animations */
  .ghosxt-border-glow { animation: none; }
  .ghosxt-radar-sweep { animation: none; }
  .ghosxt-radar-dot { animation: none; opacity: 0.4; }
  .ghosxt-status-pulse { animation: none; opacity: 1; }

  /* Badge status pulse — static */
  .badge-status::before {
    animation: none;
    opacity: 1;
  }

  /* Blueprint grid — reduce intensity */
  .blueprint-grid {
    opacity: 0.5;
  }
}