/* Custom overrides for navbar Quanteec button */

.button.quanteec-btn {
  /* Override base .button styles */
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 1.1rem;
  box-shadow: none;
  min-width: 150px; /* match .button.barnav */
  max-height: 36px;
  padding: 8px 14px;
  display: inline-flex;
  flex-direction: row; /* keep icon on the right */
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1; /* match flex behavior of .button.barnav */
}

.button.quanteec-btn .button-label {
  color: #ffffff;
}

.button.quanteec-btn:hover {
  background-color: #5ecbef;
  color: #002545;
  border-color: transparent;
}

.quanteec-arrow {
  width: 10px;
  height: 10px;
  display: inline-block;
}

/* Hover: arrow becomes white, label turns #002545 */
.button.quanteec-btn:hover .quanteec-arrow {
  filter: brightness(0) invert(1);
}

.button.quanteec-btn:hover .button-label {
  color: #002545;
}

/* Hide Quanteec desktop-only button on tablet/mobile */
@media screen and (max-width: 991px) {
  .nav-right .button.quanteec-btn.desktop-only { display: none; }
  /* Also hide the desktop Join CTA when burger is visible */
  .nav-right .button.barnav { display: none !important; }
}

/* General responsive improvements */
/* Ensure tab content doesn't clip children */
.tabs-content.w-tab-content {
  overflow: visible;
}

/* Make cover images fully responsive */
.image.cover-image, img.cover-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* General image safety */
img { max-width: 100%; height: auto; }

/* Header extra bottom space on small screens to avoid cuts */
@media screen and (max-width: 991px) {
  .section.header {
    padding-bottom: 3rem;
    padding-top: 8rem;
    background-size: cover;
  }
}

/* Desktop 6-col grids degrade across breakpoints */
@media screen and (max-width: 1279px) {
  .grid-layout.desktop-6-column { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 991px) {
  .grid-layout.desktop-6-column { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .grid-layout.desktop-6-column { grid-template-columns: 1fr; }
}

/* Fallbacks for 3- and 4-col desktop grids that lack mobile classes */
@media screen and (max-width: 991px) {
  .grid-layout.desktop-3-column { grid-template-columns: 1fr 1fr; }
  .grid-layout.desktop-4-column { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .grid-layout.desktop-3-column { grid-template-columns: 1fr; }
  .grid-layout.desktop-4-column { grid-template-columns: 1fr; }
}

/* Specific fix + flip layout for the problem grid */
#w-node-d1748685-7a95-7131-5b60-892f3022db10-956b6133 {
  justify-items: center;
}

@media screen and (max-width: 991px) {
  #w-node-d1748685-7a95-7131-5b60-892f3022db10-956b6133 { display: none; }
}

/* Utility for JS flip */
.is-hidden { display: none !important; }
.flip-enabled { position: relative; }

/* New flip card area for small screens (tablet) */
@media screen and (max-width: 991px) {
  #sbMobileFlip {
    width: 100%;
    max-width: 560px;
    margin: 12px auto 8px;
    perspective: 1000px;
    position: relative;
    aspect-ratio: 1 / 1; /* keep size while flipping */
  }
  #sbMobileFlip .sb-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.35, .04, .24, 1);
  }
  #sbMobileFlip.is-flipped .sb-flip-inner { transform: rotateY(180deg); }
  #sbMobileFlip .sb-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  #sbMobileFlip .sb-back { transform: rotateY(180deg); }
  #sbMobileFlip img { width: 100%; height: 100%; object-fit: contain; display: block; }
}

/* Allow scrolling on small screens (override Webflow globals) */
@media screen and (max-width: 991px) {
  html, body, .body { overflow-y: auto !important; overflow-x: hidden; height: auto; }
  .section { height: auto !important; min-height: auto; overflow: visible !important; }
  .section.utility-overflow-clip.trisolarien { overflow: visible !important; }
  .utility-height-100dvh, .utility-page-wrap { height: auto !important; max-height: none; }
}

/* Phone/tablet: give header text full width up to 767px */
@media screen and (max-width: 767px) {
  #w-node-_70f2528e-03ba-a81d-8bf5-0073f58e444b-78d0719d { width: 100% !important; max-width: 100% !important; }
}

/* Force single column for the early grid just below header */
@media screen and (max-width: 991px) {
  .w-layout-grid.grid-layout.mobile-landscape-1-column.grid-gap-md {
    grid-template-columns: 1fr !important;
  }
}

/* Tabs: 500–767px two-column layout for cards */
@media screen and (min-width: 500px) and (max-width: 767px) {
  /* Smaller header flip so it fully fits viewport */
  #sbMobileFlip {
    width: min(70vw, 320px) !important;
    max-width: none !important;
    margin: 8px auto 0 !important;
  }

  .section.secondary-section.int.table .w-tab-pane > .w-layout-grid.grid-layout {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row;
    place-items: stretch;
    gap: 16px !important; /* keep inner spacing modest */
  }
  /* Reset any Webflow-assigned grid areas so auto-placement works */
  .section.secondary-section.int.table .w-tab-pane > .w-layout-grid.grid-layout > a {
    grid-column: auto !important;
    grid-row: auto !important;
    box-sizing: border-box;
    max-width: 100%;
  }
  /* Ensure the very first card spans both columns in this range (all tabs) */
  .section.secondary-section.int.table .w-tab-pane > .w-layout-grid.grid-layout > a:first-of-type { grid-column: 1 / -1 !important; }

  /* Add safe side padding so no text hits viewport edges */
  .section.secondary-section.int.table .container { padding-inline: 16px; }

  /* Reduce inner horizontal padding on text cards to avoid overflow */
  .section.secondary-section.int.table .utility-padding-all-2rem { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Ensure long words/URLs wrap within the cards */
  .section.secondary-section.int.table .paragraph-sm,
  .section.secondary-section.int.table .h4-heading,
  .section.secondary-section.int.table .text-block-6,
  .section.secondary-section.int.table .text-block-7,
  .section.secondary-section.int.table .text-block-8 {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
  }
}
/* Mobile-only helpers */
.mobile-only { display: none; }
@media screen and (max-width: 991px) {
  .mobile-only { display: block; }
  .nav-menu .mobile-cta,
  .nav-menu .mobile-cta-join {
    width: 100%;
    min-width: 0;
    max-width: none;
    display: flex;
    margin-top: 8px;
  }
  /* Ensure Quanteec button inside burger keeps arrow to the right */
  .nav-menu .button.quanteec-btn { flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; }
}

/* Mobile Join CTA mimicking .barnav style without being hidden */
.button.mobile-cta-join {
  background-color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1747130756362---core-accent-color--accent-primary);
  border-radius: 1.1rem;
  color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1747130756362---background-color--bg-secondary);
  box-shadow: 0 1px 1px #0003, 0 4px 4px #0003, inset 0 3px 2px -2px #ffffff80;
}
.button.mobile-cta-join:hover {
  background-color: #a6e9ff;
}

/* Phone: ensure header container spans full width inside any grid */
@media screen and (max-width: 479px) {
  #sbMobileFlip { display: none !important; }
  #w-node-_70f2528e-03ba-a81d-8bf5-0073f58e444b-78d0719d {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }
}