/* =====================================================================
   Cloneable single route — native styles.
   The Webflow export CSS already supplies the base layout for this page
   (.sec.cloneable-page, .grid__2-col.cloneable-page-hero / -content,
   .crd.cloneable-rich-text, .crd.cloneable-sidebar, .sidebar-list, .tag,
   .btn, .dropdown-list.download-button, .dropdown-download*). This file adds
   only what the native runtime needs: the in-flow header treatment, the
   gallery carousel, the native "Clone now" dropdown, the share/comments UI,
   the category-tag icon, and responsive refinements. It deliberately does NOT
   override the export's section padding or grid columns, so the original
   spacing (incl. the intentional -60px content overlap) is preserved.
   ===================================================================== */

.cloneable-single-page {
  background: var(--new--neutral--color-100);
}

.cloneable-single-page .main-content {
  overflow: clip;
}

/* The shared header is position:absolute by default (it floats over hero
   sections). On the single page a breadcrumb sits directly beneath it, so the
   header must take real flow space — made solid + relative, exactly like the
   template single route. This is what keeps the breadcrumb tucked under the
   header instead of being overlapped by it. */
.cloneable-single-page .header-position-absolute {
  background: var(--new--neutral--color-100);
  box-shadow: 0 1px 0 rgba(231, 233, 246, .9);
  position: relative;
}

/* Grey bar (matches the template single route), with the breadcrumb content
   sitting flush/centred — not nudged down. */
.cloneable-single-page .breadcrumb-wrapper {
  background-color: var(--new--neutral--color-200);
  box-shadow: inset 0 -1px 0 rgba(231, 233, 246, .9);
}

.cloneable-single-page .breadcrumb-list-wrapper {
  position: relative;
  top: 0;
}

.cloneable-single-not-found {
  min-height: 52vh;
  padding-top: calc(var(--mg-pd--xxl) + 80px);
  padding-bottom: var(--mg-pd--xxl);
  background: var(--new--neutral--color-100);
}

/* ---- Category tag icon (hero badge + cards) ------------------------- */
.cloneable-tag-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.cloneable-tag-icon svg {
  width: 15px;
  height: 15px;
}

/* ---- Hero copy ------------------------------------------------------ */
.cloneable-single-hero__copy {
  min-width: 0;
}

.cloneable-single-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.cloneable-single-page button.btn {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
}

/* ---- Native gallery carousel ---------------------------------------- */
.cloneable-single-gallery {
  position: relative;
  min-width: 0;
}

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

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

.cloneable-single-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: #f7f7ff;
}

.cloneable-single-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cloneable-single-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #ffffffed;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #4a3aff14;
  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;
}

.cloneable-single-gallery__arrow svg {
  width: 18px;
  height: 18px;
  display: block;
}

.cloneable-single-gallery__arrow:hover {
  color: var(--new--primary-color);
  box-shadow: 0 6px 16px #4a3aff26;
}

.cloneable-single-gallery__arrow--prev {
  left: 18px;
}

.cloneable-single-gallery__arrow--prev:hover {
  transform: translate3d(-4px, -50%, 0);
}

.cloneable-single-gallery__arrow--next {
  right: 18px;
}

.cloneable-single-gallery__arrow--next:hover {
  transform: translate3d(4px, -50%, 0);
}

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

/* ---- "Clone now" native dropdown ------------------------------------ */
.cloneable-clone {
  position: relative;
  display: inline-block;
  overflow: visible;
  vertical-align: top;
}

.cloneable-clone.full-width {
  display: block;
  width: 100%;
  max-width: none;
}

.cloneable-clone__btn {
  cursor: pointer;
}

.cloneable-clone.full-width .cloneable-clone__btn {
  width: 100%;
}

.cloneable-clone__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Animate both open AND close: drive visibility with opacity/transform
   transitions instead of toggling display, so the menu eases out too. */
.cloneable-clone__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  width: max-content;
  min-width: 250px;
  max-width: 340px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -6px, 0);
  transition: opacity .22s cubic-bezier(.16, 1, .3, 1), transform .22s cubic-bezier(.16, 1, .3, 1), visibility .22s;
}

.cloneable-clone.full-width .cloneable-clone__menu {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.cloneable-clone.is-open .cloneable-clone__menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.cloneable-clone__menu .dropdown-list-item {
  display: grid;
  gap: 6px;
}

.cloneable-clone__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--new--neutral--color-800);
  transition: background .15s ease, transform .15s ease;
}

.cloneable-clone__link:hover {
  background: var(--new--neutral--color-200);
  transform: translate3d(2px, 0, 0);
}

.cloneable-clone__link .dropdown-download {
  width: auto;
  padding-left: 0;
  font-weight: 500;
}

.cloneable-clone__menu .dropdown-download-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ---- Content + sidebar (layout comes from the export CSS) ------------ */
.cloneable-single-content-main {
  min-width: 0;
}

/* Extra breathing room above the first heading so the copy isn't cramped
   against the card's top edge (+16px over the export's default top padding). */
.cloneable-single-page .crd.cloneable-rich-text {
  padding-top: calc(var(--mg-pd--d) + 16px);
}

.cloneable-rich-text .rich-text {
  color: var(--new--neutral--color-600);
}

.cloneable-rich-text .rich-text > :first-child {
  margin-top: 0;
}

.cloneable-rich-text .rich-text > :last-child {
  margin-bottom: 0;
}

.cloneable-rich-text .rich-text ul li::marker {
  color: var(--new--primary-color);
}

/* Body links: no underline; fade to 60% opacity on hover. */
.cloneable-rich-text .rich-text a {
  text-decoration: none;
  transition: opacity .2s ease;
}

.cloneable-rich-text .rich-text a:hover {
  opacity: .6;
}

.cloneable-rich-text .rich-text img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ---- Share row ------------------------------------------------------ */
.cloneable-rich-text .share-post-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Replaces the spacing the removed divider used to provide. */
  margin-top: 40px;
}

.cloneable-rich-text .share-links-contianer {
  display: flex;
  align-items: center;
  grid-column-gap: 14px;
  gap: 14px;
}

/* Circular share icons identical to the Blog single route: white disc, soft
   shadow, lift + brand colour on hover. */
.cloneable-rich-text .social-media-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 8px 22px rgba(20, 20, 43, 0.08);
  color: var(--new--neutral--color-600);
  transition: transform 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.cloneable-rich-text .social-media-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 20, 43, 0.16);
}

.cloneable-rich-text .social-media-icon svg {
  width: 17px;
  height: 17px;
}

.cloneable-rich-text .social-media-icon--facebook:hover,
.cloneable-rich-text .social-media-icon--facebook:focus-visible {
  color: #1877f2;
}

.cloneable-rich-text .social-media-icon--x:hover,
.cloneable-rich-text .social-media-icon--x:focus-visible {
  color: #000;
}

.cloneable-rich-text .social-media-icon--linkedin:hover,
.cloneable-rich-text .social-media-icon--linkedin:focus-visible {
  color: #0a66c2;
}

/* ---- Comments ------------------------------------------------------- */
.cloneable-comments-wrapper {
  margin-top: 32px;
}

/* Identical to the Blog single comments placeholder: rounded soft-purple icon
   tile, generous title/text/button rhythm, pill gradient button. */
.cloneable-comments-wrapper .comments-placeholder {
  text-align: center;
  padding: 22px 0 14px;
  transition: opacity .2s ease;
}

.cloneable-comments-wrapper .comments-placeholder.is-loading {
  opacity: .55;
  pointer-events: none;
}

.cloneable-comments-wrapper .comments-placeholder__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--new--secondary--color-2);
  color: var(--new--primary-color);
}

.cloneable-comments-wrapper .comments-placeholder__icon svg {
  width: 24px;
  height: 24px;
}

.cloneable-comments-wrapper .comments-placeholder__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--new--neutral--color-800);
  margin-bottom: 6px;
}

.cloneable-comments-wrapper .comments-placeholder__text {
  margin: 0 0 20px;
  color: var(--new--neutral--color-600);
  font-size: 14px;
}

.cloneable-comments-wrapper .comments-placeholder__btn {
  display: inline-flex;
  cursor: pointer;
}

/* ---- Sidebar -------------------------------------------------------- */
.cloneable-single-sidebar-wrap {
  min-width: 0;
}

.cloneable-single-sidebar__buttons {
  display: grid;
  gap: 12px;
}

.cloneable-single-sidebar__buttons .btn {
  width: 100%;
}

.cloneable-single-sidebar__buttons .cloneable-clone__btn {
  justify-content: center;
  width: 100%;
}

.cloneable-sidebar .sidebar-list-item {
  align-items: center;
}

/* "Want more cloneables" newsletter — input mirrors the figma-freebies
   subscribe input (placeholder colour, type scale, focus/hover ring). */
.cloneable-single-page .inp.clonable_subscirbe {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: calc(var(--mg-pd--xs) * 2);
  padding-right: calc(var(--mg-pd--xs) * 2);
  color: var(--new--neutral--color-800);
  font-size: var(--texts--ts-9);
  transition: border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.cloneable-single-page .inp.clonable_subscirbe::placeholder {
  color: var(--new--neutral--color-500);
  font-size: var(--texts--ts-9);
}

.cloneable-single-page .inp.clonable_subscirbe:hover,
.cloneable-single-page .inp.clonable_subscirbe:focus {
  border-color: var(--new--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(74, 58, 255, .16), 0 2px 12px rgba(20, 20, 43, .1);
}

.cloneable-single-page .form-newsletter.sidebar .btn.full-width {
  min-height: 50px;
  justify-content: center;
}

/* ---- "More cloneables" ---------------------------------------------- */
.cloneable-single-more .title-btn {
  align-items: center;
  margin-bottom: 40px;
}

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

  .cloneable-single-page .breadcrumb-list-wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cloneable-single-page .breadcrumb-list-wrapper::-webkit-scrollbar {
    display: none;
  }

  .cloneable-single-page .breadcrumb-list-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .cloneable-clone__menu {
    min-width: 0;
    width: 100%;
  }

  .cloneable-single-more .title-btn .btn {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .cloneable-rich-text .share-post-wrapper {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 14px;
  }

  .cloneable-rich-text .share-links-contianer {
    justify-content: center;
  }
}