/* =============================================================================
   Exclusive Template Single — page-scoped runtime CSS
   Scope: .exclusive-single-page (set on .page-wrapper)

   This page is faithful to the original Webflow export, with the Webflow
   runtime removed. The interactive contracts the export depended on are
   replaced natively here:
     1. The hero image carousel — reuses the Template Single gallery engine
        (markup + animation + arrows), driven by /templates/template-single.js.
     2. The "Preview on" content dropdown — native toggle, sized like the
        MegaTech page, driven by /exclusive-exclusive-template/exclusive-single.js.
============================================================================= */

/* The original single-page export rendered the header in normal flow (the
   breadcrumb + hero sit below it). The shared partial floats the header as an
   absolute overlay, so neutralize it here to keep the hero clear of the nav. */
.exclusive-single-page .header-position-absolute { position: static; }

/* -----------------------------------------------------------------------------
   Breadcrumb bar — top + bottom border, and the ">" separator glyph the
   static export dropped from its icon-font element.
----------------------------------------------------------------------------- */
.exclusive-single-page .breadcrumb-wrapper {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--new--neutral--color-300);
  border-bottom: 1px solid var(--new--neutral--color-300);
}

.exclusive-single-page .breadcrumb-list-item .brix_icon-font.breadcrumb {
  display: inline-flex;
  align-items: center;
  color: var(--new--neutral--color-500);
}

.exclusive-single-page .breadcrumb-list-item .brix_icon-font.breadcrumb svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  position: relative;
  top: 1px;
}

/* Both breadcrumb items render at the exact same size/weight (the last item is
   a .text-50 div, the others are .breadcrumb-list-link anchors). */
.exclusive-single-page .breadcrumb-list-item .breadcrumb-list-link,
.exclusive-single-page .breadcrumb-list-item .text-50 {
  font-size: 13px;
  line-height: 15px;
  font-weight: 400;
}

/* -----------------------------------------------------------------------------
   Hero carousel — Template Single gallery
   Same viewport frame, slide transition and arrow design as the CMS template
   single, so the hero animates identically. Images here are full template
   screenshots, so the slide shows the whole image (no 1.6:1 crop).
----------------------------------------------------------------------------- */
.exclusive-single-page .template-single-gallery {
  position: relative;
  min-width: 0;
  height: 100%;
}

.exclusive-single-page .template-single-gallery__viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--new--neutral--color-300);
  border-radius: var(--radius--br-5);
  background: var(--new--neutral--color-100);
  box-shadow: 0 3px 8px #211f5417;
}

.exclusive-single-page .template-single-gallery__track {
  display: flex;
  will-change: transform;
  transition: transform .48s cubic-bezier(.22, 1, .36, 1);
}

.exclusive-single-page .template-single-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.exclusive-single-page .template-single-gallery__image {
  display: block;
  width: 100%;
  height: auto;
}

.exclusive-single-page .template-single-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #ffffffed;
  border-radius: 50%;
  background: #ffffffb8;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 2px 5px #4a3aff0d;
  color: var(--new--neutral--color-800);
  cursor: pointer;
  transform: translate3d(0, -50%, 0);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}

.exclusive-single-page .template-single-gallery__arrow svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
}

.exclusive-single-page .template-single-gallery__arrow--prev { left: 16px; }
.exclusive-single-page .template-single-gallery__arrow--prev:hover { transform: translate3d(-4px, -50%, 0); }
.exclusive-single-page .template-single-gallery__arrow--next { right: 16px; }
.exclusive-single-page .template-single-gallery__arrow--next:hover { transform: translate3d(4px, -50%, 0); }

.exclusive-single-page .template-single-gallery[data-gallery-single="true"] .template-single-gallery__arrow {
  display: none;
}

@media screen and (max-width: 479px) {
  /* Swiping is the primary gesture on phones. */
  .exclusive-single-page .template-single-gallery__arrow { display: none; }
}

/* -----------------------------------------------------------------------------
   Contact section — give the 3D envelope a bit more breathing room above the
   "Have questions?" subtitle (the export sat it too close).
----------------------------------------------------------------------------- */
.exclusive-single-page .exclusive-template-contact .contact-webflow-exclusive-wrapper {
  margin-bottom: 36px;
}

/* -----------------------------------------------------------------------------
   Rich text links — no underline, fade to 60% on hover.
----------------------------------------------------------------------------- */
.exclusive-single-page .rich-text.w-richtext a {
  text-decoration: none;
  transition: opacity .2s ease;
}

.exclusive-single-page .rich-text.w-richtext a:hover {
  opacity: .6;
}

/* -----------------------------------------------------------------------------
   Share post — same centered pill row as Template Single.
----------------------------------------------------------------------------- */
.exclusive-single-page .share-post-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
  text-align: center;
}

.exclusive-single-page .share-links-contianer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.exclusive-single-page .share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 43, .08);
  color: var(--new--neutral--color-600);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.exclusive-single-page .share-link:hover {
  box-shadow: 0 12px 28px rgba(20, 20, 43, .16);
  transform: translateY(-4px);
}

.exclusive-single-page .share-link svg {
  width: 17px;
  height: 17px;
}

.exclusive-single-page .share-link.social-media-icon--facebook:hover,
.exclusive-single-page .share-link.social-media-icon--facebook:focus-visible { color: #1877f2; }
.exclusive-single-page .share-link.social-media-icon--x:hover,
.exclusive-single-page .share-link.social-media-icon--x:focus-visible { color: #000; }
.exclusive-single-page .share-link.social-media-icon--linkedin:hover,
.exclusive-single-page .share-link.social-media-icon--linkedin:focus-visible { color: #0a66c2; }

@media screen and (max-width: 479px) {
  .exclusive-single-page .share-post-wrapper {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .exclusive-single-page .share-links-contianer { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   "Preview on" content dropdown
   Toggling `.w--open` on the list flips Webflow's base display:none/block
   contract (kept in webflow.css); these rules animate it and size the card to
   its single-line content, matching the MegaTech page.
----------------------------------------------------------------------------- */
.exclusive-single-page .secondary-btn-dropdown {
  position: relative;
  display: inline-block;
}

.exclusive-single-page .secondary-btn-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;
}

.exclusive-single-page .secondary-btn-dropdown-list.w--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.exclusive-single-page .secondary-btn-dropdown .btn.secondary.dropdown {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.exclusive-single-page .secondary-btn-dropdown .btn__caret {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.exclusive-single-page .secondary-btn-dropdown .btn__caret svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
}

.exclusive-single-page .secondary-btn-dropdown.is-open .btn__caret {
  transform: rotate(180deg);
}

/* The card sizes to its (single-line) content so option labels never wrap. */
.exclusive-single-page .secondary-btn-dropdown .dropdown-link-icon-left { white-space: nowrap; }
.exclusive-single-page .secondary-btn-dropdown .crd {
  width: max-content;
  min-width: 290px;
}

.exclusive-single-page .secondary-btn-dropdown-list .btn-dropdown-list { display: grid; }

/* On tablet/mobile the dropdown sizes to its content but stays on screen. */
@media screen and (max-width: 991px) {
  .exclusive-single-page .secondary-btn-dropdown-list {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 40px);
    left: auto;
    right: 0;
  }
  .exclusive-single-page .secondary-btn-dropdown .crd {
    width: 100%;
    min-width: 0;
  }
}