/* ==========================================================================
   Responsive Utilities - Ganados Pro Theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container Responsive Adjustments
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.container--fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Text Size Responsive Utilities
   .text-{bp}-{size} where size: xs, sm, base, md, lg, xl, xxl
   -------------------------------------------------------------------------- */

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-md   { font-size: 1.125rem; }
.text-lg   { font-size: 1.25rem; }
.text-xl   { font-size: 1.5rem; }
.text-xxl  { font-size: 2rem; }

@media (min-width: 576px) {
  .text-sm-xs   { font-size: 0.75rem; }
  .text-sm-sm   { font-size: 0.875rem; }
  .text-sm-base { font-size: 1rem; }
  .text-sm-md   { font-size: 1.125rem; }
  .text-sm-lg   { font-size: 1.25rem; }
  .text-sm-xl   { font-size: 1.5rem; }
  .text-sm-xxl  { font-size: 2rem; }
}

@media (min-width: 768px) {
  .text-md-xs   { font-size: 0.75rem; }
  .text-md-sm   { font-size: 0.875rem; }
  .text-md-base { font-size: 1rem; }
  .text-md-md   { font-size: 1.125rem; }
  .text-md-lg   { font-size: 1.25rem; }
  .text-md-xl   { font-size: 1.5rem; }
  .text-md-xxl  { font-size: 2rem; }
}

@media (min-width: 992px) {
  .text-lg-xs   { font-size: 0.75rem; }
  .text-lg-sm   { font-size: 0.875rem; }
  .text-lg-base { font-size: 1rem; }
  .text-lg-md   { font-size: 1.125rem; }
  .text-lg-lg   { font-size: 1.25rem; }
  .text-lg-xl   { font-size: 1.5rem; }
  .text-lg-xxl  { font-size: 2rem; }
}

@media (min-width: 1200px) {
  .text-xl-xs   { font-size: 0.75rem; }
  .text-xl-sm   { font-size: 0.875rem; }
  .text-xl-base { font-size: 1rem; }
  .text-xl-md   { font-size: 1.125rem; }
  .text-xl-lg   { font-size: 1.25rem; }
  .text-xl-xl   { font-size: 1.5rem; }
  .text-xl-xxl  { font-size: 2rem; }
}

@media (min-width: 1400px) {
  .text-xxl-xs   { font-size: 0.75rem; }
  .text-xxl-sm   { font-size: 0.875rem; }
  .text-xxl-base { font-size: 1rem; }
  .text-xxl-md   { font-size: 1.125rem; }
  .text-xxl-lg   { font-size: 1.25rem; }
  .text-xxl-xl   { font-size: 1.5rem; }
  .text-xxl-xxl  { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   Responsive Text Alignment
   .text-{bp}-{align}
   -------------------------------------------------------------------------- */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

@media (min-width: 576px) {
  .text-sm-left   { text-align: left; }
  .text-sm-center { text-align: center; }
  .text-sm-right  { text-align: right; }
}

@media (min-width: 768px) {
  .text-md-left   { text-align: left; }
  .text-md-center { text-align: center; }
  .text-md-right  { text-align: right; }
}

@media (min-width: 992px) {
  .text-lg-left   { text-align: left; }
  .text-lg-center { text-align: center; }
  .text-lg-right  { text-align: right; }
}

@media (min-width: 1200px) {
  .text-xl-left   { text-align: left; }
  .text-xl-center { text-align: center; }
  .text-xl-right  { text-align: right; }
}

@media (min-width: 1400px) {
  .text-xxl-left   { text-align: left; }
  .text-xxl-center { text-align: center; }
  .text-xxl-right  { text-align: right; }
}

/* --------------------------------------------------------------------------
   Show / Hide at Breakpoints
   .hide-{bp}  - hidden at that breakpoint and up
   .show-{bp}  - visible only at that breakpoint and up
   .hide-below-{bp} - hidden below that breakpoint
   -------------------------------------------------------------------------- */

.hide-sm,
.hide-md,
.hide-lg,
.hide-xl,
.hide-xxl {
  /* reset: visible by default */
}

@media (min-width: 576px) {
  .hide-sm { display: none !important; }
}

@media (min-width: 768px) {
  .hide-md { display: none !important; }
}

@media (min-width: 992px) {
  .hide-lg { display: none !important; }
}

@media (min-width: 1200px) {
  .hide-xl { display: none !important; }
}

@media (min-width: 1400px) {
  .hide-xxl { display: none !important; }
}

/* Show only at breakpoint and up (hidden by default) */
.show-sm,
.show-md,
.show-lg,
.show-xl,
.show-xxl {
  display: none !important;
}

@media (min-width: 576px) {
  .show-sm { display: block !important; }
  .show-sm--inline { display: inline !important; }
  .show-sm--flex { display: flex !important; }
}

@media (min-width: 768px) {
  .show-md { display: block !important; }
  .show-md--inline { display: inline !important; }
  .show-md--flex { display: flex !important; }
}

@media (min-width: 992px) {
  .show-lg { display: block !important; }
  .show-lg--inline { display: inline !important; }
  .show-lg--flex { display: flex !important; }
}

@media (min-width: 1200px) {
  .show-xl { display: block !important; }
  .show-xl--inline { display: inline !important; }
  .show-xl--flex { display: flex !important; }
}

@media (min-width: 1400px) {
  .show-xxl { display: block !important; }
  .show-xxl--inline { display: inline !important; }
  .show-xxl--flex { display: flex !important; }
}

/* Hide below breakpoint */
.hide-below-sm { display: none !important; }
.hide-below-md { display: none !important; }
.hide-below-lg { display: none !important; }
.hide-below-xl { display: none !important; }

@media (min-width: 576px) {
  .hide-below-sm { display: block !important; }
}

@media (min-width: 768px) {
  .hide-below-md { display: block !important; }
}

@media (min-width: 992px) {
  .hide-below-lg { display: block !important; }
}

@media (min-width: 1200px) {
  .hide-below-xl { display: block !important; }
}

/* --------------------------------------------------------------------------
   Responsive Flex Direction - Stack Utilities
   .stack-{bp} - flex-direction: column at that breakpoint and below
   -------------------------------------------------------------------------- */

.stack-sm,
.stack-md,
.stack-lg,
.stack-xl {
  display: flex;
  flex-direction: column;
}

@media (min-width: 576px) {
  .stack-sm { flex-direction: row; }
}

@media (min-width: 768px) {
  .stack-md { flex-direction: row; }
}

@media (min-width: 992px) {
  .stack-lg { flex-direction: row; }
}

@media (min-width: 1200px) {
  .stack-xl { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Responsive Order
   .order-{bp}-{n} where n: 0..6, first, last
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {
  .order-sm-first { order: -1; }
  .order-sm-0     { order: 0; }
  .order-sm-1     { order: 1; }
  .order-sm-2     { order: 2; }
  .order-sm-3     { order: 3; }
  .order-sm-4     { order: 4; }
  .order-sm-5     { order: 5; }
  .order-sm-6     { order: 6; }
  .order-sm-last  { order: 999; }
}

@media (min-width: 768px) {
  .order-md-first { order: -1; }
  .order-md-0     { order: 0; }
  .order-md-1     { order: 1; }
  .order-md-2     { order: 2; }
  .order-md-3     { order: 3; }
  .order-md-4     { order: 4; }
  .order-md-5     { order: 5; }
  .order-md-6     { order: 6; }
  .order-md-last  { order: 999; }
}

@media (min-width: 992px) {
  .order-lg-first { order: -1; }
  .order-lg-0     { order: 0; }
  .order-lg-1     { order: 1; }
  .order-lg-2     { order: 2; }
  .order-lg-3     { order: 3; }
  .order-lg-4     { order: 4; }
  .order-lg-5     { order: 5; }
  .order-lg-6     { order: 6; }
  .order-lg-last  { order: 999; }
}

@media (min-width: 1200px) {
  .order-xl-first { order: -1; }
  .order-xl-0     { order: 0; }
  .order-xl-1     { order: 1; }
  .order-xl-2     { order: 2; }
  .order-xl-3     { order: 3; }
  .order-xl-4     { order: 4; }
  .order-xl-5     { order: 5; }
  .order-xl-6     { order: 6; }
  .order-xl-last  { order: 999; }
}

/* --------------------------------------------------------------------------
   Responsive Width Percentages
   .w-{bp}-{pct} where pct: 25, 50, 75, 100, auto
   -------------------------------------------------------------------------- */

.w-25   { width: 25%; }
.w-50   { width: 50%; }
.w-75   { width: 75%; }
.w-100  { width: 100%; }
.w-auto { width: auto; }

@media (min-width: 576px) {
  .w-sm-25   { width: 25%; }
  .w-sm-50   { width: 50%; }
  .w-sm-75   { width: 75%; }
  .w-sm-100  { width: 100%; }
  .w-sm-auto { width: auto; }
}

@media (min-width: 768px) {
  .w-md-25   { width: 25%; }
  .w-md-50   { width: 50%; }
  .w-md-75   { width: 75%; }
  .w-md-100  { width: 100%; }
  .w-md-auto { width: auto; }
}

@media (min-width: 992px) {
  .w-lg-25   { width: 25%; }
  .w-lg-50   { width: 50%; }
  .w-lg-75   { width: 75%; }
  .w-lg-100  { width: 100%; }
  .w-lg-auto { width: auto; }
}

@media (min-width: 1200px) {
  .w-xl-25   { width: 25%; }
  .w-xl-50   { width: 50%; }
  .w-xl-75   { width: 75%; }
  .w-xl-100  { width: 100%; }
  .w-xl-auto { width: auto; }
}

@media (min-width: 1400px) {
  .w-xxl-25   { width: 25%; }
  .w-xxl-50   { width: 50%; }
  .w-xxl-75   { width: 75%; }
  .w-xxl-100  { width: 100%; }
  .w-xxl-auto { width: auto; }
}

/* --------------------------------------------------------------------------
   Aspect Ratio Utilities
   .aspect-{ratio}
   -------------------------------------------------------------------------- */

.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-21-9 {
  aspect-ratio: 21 / 9;
}

.aspect-1-1,
.aspect-4-3,
.aspect-16-9,
.aspect-21-9 {
  width: 100%;
  overflow: hidden;
}

.aspect-1-1 > img,
.aspect-4-3 > img,
.aspect-16-9 > img,
.aspect-21-9 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Responsive Spacing Overrides
   .p-{bp}-{n}, .m-{bp}-{n} where n: 0..5
   Spacing scale: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-2 { padding: 0.5rem !important; }
  .p-md-3 { padding: 1rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }

  .m-md-0 { margin: 0 !important; }
  .m-md-1 { margin: 0.25rem !important; }
  .m-md-2 { margin: 0.5rem !important; }
  .m-md-3 { margin: 1rem !important; }
  .m-md-4 { margin: 1.5rem !important; }
  .m-md-5 { margin: 3rem !important; }

  .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

  .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

@media (min-width: 992px) {
  .p-lg-0 { padding: 0 !important; }
  .p-lg-1 { padding: 0.25rem !important; }
  .p-lg-2 { padding: 0.5rem !important; }
  .p-lg-3 { padding: 1rem !important; }
  .p-lg-4 { padding: 1.5rem !important; }
  .p-lg-5 { padding: 3rem !important; }

  .m-lg-0 { margin: 0 !important; }
  .m-lg-1 { margin: 0.25rem !important; }
  .m-lg-2 { margin: 0.5rem !important; }
  .m-lg-3 { margin: 1rem !important; }
  .m-lg-4 { margin: 1.5rem !important; }
  .m-lg-5 { margin: 3rem !important; }

  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-lg-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

  .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* --------------------------------------------------------------------------
   Image Responsive Sizes
   -------------------------------------------------------------------------- */

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .img-full-mobile {
    width: 100% !important;
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   Table Responsive Wrapper
   -------------------------------------------------------------------------- */

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 600px;
}

@media (min-width: 768px) {
  .table-responsive--md {
    overflow-x: visible;
  }
}

@media (min-width: 992px) {
  .table-responsive--lg {
    overflow-x: visible;
  }
}

/* --------------------------------------------------------------------------
   Form Responsive Layouts
   -------------------------------------------------------------------------- */

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form__col {
  flex: 1 1 100%;
}

@media (min-width: 576px) {
  .form__col--half {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

@media (min-width: 768px) {
  .form__col--third {
    flex: 1 1 calc(33.333% - 0.667rem);
  }

  .form__col--quarter {
    flex: 1 1 calc(25% - 0.75rem);
  }
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Card Responsive Grid Helpers
   -------------------------------------------------------------------------- */

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card-grid__item {
  flex: 1 1 100%;
}

@media (min-width: 576px) {
  .card-grid__item {
    flex: 1 1 calc(50% - 0.75rem);
  }
}

@media (min-width: 768px) {
  .card-grid--cols-3 .card-grid__item {
    flex: 1 1 calc(33.333% - 1rem);
  }
}

@media (min-width: 992px) {
  .card-grid--cols-4 .card-grid__item {
    flex: 1 1 calc(25% - 1.125rem);
  }
}

/* --------------------------------------------------------------------------
   Responsive Typography Scale
   Fluid scaling for headings on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  h1, .heading--1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  h2, .heading--2 {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  h3, .heading--3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  h4, .heading--4 {
    font-size: 1.125rem;
    line-height: 1.35;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  h1, .heading--1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2, .heading--2 {
    font-size: 1.75rem;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */

@media print {
  /* Force white background and black text */
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Hide non-essential elements */
  .site-header__nav,
  .site-nav,
  .nav,
  .navigation,
  .menu-toggle,
  .hamburger,
  .mobile-menu,
  .sidebar,
  .site-footer__extras,
  .footer__social,
  .footer__newsletter,
  .btn,
  .button,
  .cta,
  .back-to-top,
  .cookie-notice,
  .modal,
  .popup,
  .slider__arrows,
  .slider__dots,
  .pagination,
  .breadcrumbs,
  .search-form,
  .comment-form,
  .share-buttons,
  .related-posts,
  .ads,
  [role="complementary"] {
    display: none !important;
  }

  /* Container full width */
  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Links - show URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  /* Avoid page breaks inside important elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }

  p, blockquote, ul, ol, dl, table, pre {
    page-break-inside: avoid;
  }

  /* Table borders for print */
  table {
    border-collapse: collapse;
  }

  table th,
  table td {
    border: 1px solid #ccc !important;
    padding: 0.5em;
  }

  /* Show header logo area but simplify */
  .site-header {
    border-bottom: 2px solid #000;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }

  /* Footer simplification */
  .site-footer {
    border-top: 1px solid #000;
    margin-top: 2rem;
    padding-top: 0.5rem;
    font-size: 10pt;
  }
}