/* ==========================================================================
   TecnoVista - Responsive Stylesheet
   Breakpoints: 991px (tablet), 767px (mobile), 575px (mobile-sm)
   ========================================================================== */

/* ==========================================================================
   TABLET AND BELOW  (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {

  /* --- Global --- */
  section {
    padding: 60px 0;
  }

  .cta-section {
    padding: 60px 0;
  }

  /* --- Header: show hamburger, hide nav links --- */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Hero: single column, hide hero image --- */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  .hero-subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-ctas {
    justify-content: center;
  }

  .hero-image {
    display: none;
  }

  /* --- Categories: 2 columns --- */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Featured Analysis: stack vertically --- */
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-card-large {
    height: auto;
  }

  /* --- Analysis Grid: 2 columns --- */
  .analysis-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Methodology Steps: 2 columns --- */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* --- CTA section: single column --- */
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* --- Guides: 2 columns --- */
  .guides-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Guide featured grid: single column --- */
  .guide-featured-grid {
    grid-template-columns: 1fr;
  }

  /* --- Analysis Detail Header: single column --- */
  .detail-header-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* --- Analysis Detail Layout: single column --- */
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    position: static;
  }

  .toc-sidebar {
    position: static;
  }

  /* --- Contact: single column --- */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* --- Guide info grid: single column --- */
  .guide-info-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* --- Footer grid: 2 columns --- */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand p {
    max-width: 100%;
  }

  /* --- Process steps: 2 columns --- */
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Score block layout --- */
  .mini-score-label {
    min-width: 100px;
  }

}

/* ==========================================================================
   MOBILE  (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Global section padding --- */
  section {
    padding: 40px 0;
  }

  .cta-section {
    padding: 40px 0;
  }

  .page-header {
    padding: 40px 0;
  }

  /* --- Typography scale down --- */
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  /* --- Categories: 1 column --- */
  .categories-grid {
    grid-template-columns: 1fr;
  }

  /* --- Analysis Grid: 1 column --- */
  .analysis-grid {
    grid-template-columns: 1fr;
  }

  /* --- Guides: 1 column --- */
  .guides-grid {
    grid-template-columns: 1fr;
  }

  /* --- Methodology: 1 column --- */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* --- Featured small cards: stack vertically --- */
  .featured-card-small {
    flex-direction: column;
    height: auto;
  }

  .featured-card-small .card-image-wrapper,
  .featured-card-small-image {
    width: 100%;
    height: 180px;
  }

  .featured-card-small .card-body,
  .featured-card-small-body {
    width: 100%;
  }

  /* --- Process Steps: 1 column --- */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* --- Pros-cons: 1 column --- */
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }

  /* --- Cookie banner: stack vertically --- */
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions .btn-primary,
  .cookie-actions .btn-secondary,
  .cookie-actions .btn-ghost {
    flex: 1;
    justify-content: center;
  }

  /* --- Filter bar: horizontal scroll --- */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-inner {
    min-width: max-content;
    padding: 0 24px;
  }

  .filter-pills {
    flex-wrap: nowrap;
  }

  /* --- Footer grid: single column --- */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* --- Guide featured card padding --- */
  .guide-featured-card {
    padding: 28px 24px;
  }

  /* --- Detail header --- */
  .detail-header-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* --- Score block: responsive font --- */
  .score-main {
    font-size: 3.25rem;
  }

  /* --- Pagination: compact --- */
  .pagination {
    gap: 6px;
  }

  /* --- Section header --- */
  .section-header {
    margin-bottom: 32px;
  }

  /* --- Comparison table: scroll --- */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius-card);
  }

  /* --- Share buttons: wrap --- */
  .share-buttons {
    flex-wrap: wrap;
  }

  /* --- Breadcrumb: wrap --- */
  .breadcrumb {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* --- Back to top: adjust position --- */
  #back-to-top {
    bottom: 24px;
    right: 16px;
    width: 40px;
    height: 40px;
  }

  /* --- Accordion header --- */
  .accordion-header {
    font-size: 0.925rem;
    padding: 16px 20px;
  }

  .accordion-body-inner {
    padding: 0 20px 16px;
  }

  /* --- Featured grid: single column --- */
  .featured-grid {
    grid-template-columns: 1fr;
  }

  .featured-cards-stack {
    gap: 16px;
  }

  /* --- CTA form button: full width --- */
  .cta-form .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* --- Cookie modal width --- */
  .cookie-modal {
    padding: 24px;
  }

}

/* ==========================================================================
   MOBILE SMALL  (max-width: 575px)
   ========================================================================== */
@media (max-width: 575px) {

  /* --- Typography --- */
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  /* --- Container padding --- */
  .container {
    padding: 0 16px;
  }

  /* --- Hero CTAs: vertical stack --- */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .hero-ctas .btn-ghost {
    justify-content: center;
    width: 100%;
  }

  /* --- Score main: smaller --- */
  .score-main {
    font-size: 3rem;
  }

  .score-large {
    font-size: 2rem;
  }

  /* --- Pagination: fewer visible buttons --- */
  .pagination .page-btn:not(.active):not(.page-btn-arrow):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
    display: none;
  }

  /* --- Page header: smaller --- */
  .page-header {
    padding: 32px 0;
  }

  .page-header p {
    font-size: 1rem;
  }

  /* --- Category card: compact --- */
  .category-card {
    padding: 24px;
  }

  /* --- Step card: compact --- */
  .step-card {
    padding: 24px 16px;
  }

  .step-number {
    font-size: 2.5rem;
  }

  /* --- Guide card: compact --- */
  .guide-card {
    padding: 24px;
  }

  /* --- Guide featured card: compact --- */
  .guide-featured-card {
    padding: 24px;
  }

  /* --- Score block: compact --- */
  .score-block {
    padding: 20px;
  }

  /* --- Verdict block: compact --- */
  .verdict-block {
    padding: 24px;
  }

  /* --- Process step: compact --- */
  .process-step {
    padding: 24px 16px;
  }

  /* --- Buy box: compact --- */
  .buy-box {
    padding: 20px;
  }

  .buy-box-price {
    font-size: 1.75rem;
  }

  /* --- Featured card large body: compact --- */
  .featured-card-large .card-body {
    padding: 20px;
  }

  /* --- Analysis card body: compact --- */
  .analysis-card-body {
    padding: 16px;
  }

  /* --- Filter bar: full scroll with no inner min-width constrain --- */
  .filter-inner {
    padding: 0 16px;
  }

  /* --- Buttons: full-width where used as primary CTA --- */
  .btn-block {
    width: 100%;
    justify-content: center;
  }

  /* --- Cookie modal: full-width --- */
  .cookie-modal {
    max-width: 100%;
    width: 95%;
    padding: 20px;
  }

  /* --- Footer legal links: wrap --- */
  .footer-legal-links {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* --- TOC sidebar: compact --- */
  .toc-sidebar {
    padding: 20px;
  }

  /* --- Product gallery padding --- */
  .product-gallery {
    padding: 16px;
  }

  /* --- Product thumbnails: smaller --- */
  .product-thumbnail {
    width: 56px;
    height: 56px;
  }

  /* --- Mini score label: shorter --- */
  .mini-score-label {
    min-width: 80px;
    font-size: 0.8rem;
  }

  /* --- Section header --- */
  .section-subtitle {
    font-size: 1rem;
  }

  /* --- Accordion: compact --- */
  .accordion-header {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .accordion-body-inner {
    padding: 0 16px 14px;
    font-size: 0.875rem;
  }

  /* --- Share buttons: stack on very small screens --- */
  .share-btn {
    font-size: 0.75rem;
    padding: 7px 12px;
  }

  /* --- CTA section inner --- */
  .cta-inner {
    gap: 24px;
  }

  /* --- Cookie actions: column --- */
  .cookie-actions {
    flex-direction: column;
  }

  .cookie-actions .btn-primary,
  .cookie-actions .btn-secondary,
  .cookie-actions .btn-ghost {
    text-align: center;
    justify-content: center;
  }

  /* --- Back-to-top: small screens --- */
  #back-to-top {
    bottom: 16px;
    right: 12px;
  }

}