/*
  One Page Bento Dashboard Custom Stylesheet
  Author: Antigravity AI
*/

/* Scale down skill chips to 80% size for a streamlined layout */
.skill-chip {
  font-size: 0.8rem !important;
  padding: 6px 10px !important;
}

/* Force page to scroll naturally on desktop when content height exceeds viewport */
.page {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* ===========================================================
   1. LARGE DESKTOP & ULTRA-WIDE (>= 1200px)
   Layout:
     [   card-started   spans 3   ]   <- Row 1 top capstone
     [ card-works ] [ card-about ] [ card-resume ]  <- Row 2
     [   card-contact   spans 3   ]   <- Row 3 bottom capstone
   =========================================================== */
@media (min-width: 1024px) {
  .onepage-dashboard {
    position: relative !important;
    margin: 6vh auto !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 95vw !important;
    max-width: 1550px !important;
    height: auto !important;
    /* 3 equal columns — cards span them via grid-column below */
    display: grid !important;
    grid-template-columns: 1fr 1.5fr 1fr !important;
    gap: 24px !important;
    z-index: 11 !important;
    background: transparent !important;
  }

  .onepage-dashboard .card-started .profile.no-photo .title {
	margin-top: 182px;
}

  /* Row 1: profile card spans full width */
  .onepage-dashboard .card-started {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    float: none !important;
    /* Explicit height: new-skin sets height:100% which collapses in a grid auto row */
    height: 520px !important;
    overflow: hidden !important;
  }

  /* Row 2: three equal columns */
  .onepage-dashboard .card-col-1  { grid-column: 1 !important; }
  .onepage-dashboard .card-col-2  { grid-column: 2 !important; }
  .onepage-dashboard .card-col-3 { grid-column: 3 !important; }

  /* Row 3: contact spans full width */
  .onepage-dashboard .card-contact {
    grid-column: 1 / -1 !important;
  }

  /* Slide: contain so the full logo is visible, not cropped by cover on a wide card */
  .onepage-dashboard .card-started .profile .slide,
  .onepage-dashboard .card-started .profile.no-photo .slide {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 260px !important;
  }

  /* Push title/content below the 260px slide */
  .onepage-dashboard .card-started .profile.no-photo {
    padding-top: -135px !important;
  }

  /* Shared bento tile styles */
  .onepage-dashboard .bento-card {
    background: rgba(30, 30, 31, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
  }

  .onepage-dashboard .bento-card:hover {
    border-color: rgba(255, 51, 68, 0.25) !important;
    transform: translateY(-2px) !important;
  }

  .onepage-dashboard .bento-card-header {
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
  }

  .onepage-dashboard .bento-card-header i {
    color: #ff3344 !important;
    font-size: 16px !important;
  }

  .onepage-dashboard .bento-card-content {
    padding: 24px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex: 1 !important;
  }
}

/* ===========================================================
   2. MOBILE & TABLET (< 1024px)
   =========================================================== */
@media (max-width: 1023px) {
  .onepage-dashboard {
    margin: 80px auto 30px auto !important;
    width: 92% !important;
    max-width: 580px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .onepage-dashboard .card-started {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 560px !important;
  }

  .onepage-dashboard .bento-card {
    background: #1e1e1f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.05) !important;
  }

  .onepage-dashboard .bento-card-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }

  .onepage-dashboard .bento-card-header i { color: #ff3344 !important; }

  .onepage-dashboard .bento-card-content {
    padding: 20px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 560px) {
  .onepage-dashboard {
    margin: 70px auto 20px auto !important;
    width: 95% !important;
  }
  .onepage-dashboard .card-started { min-height: 500px !important; }
  .onepage-dashboard .bento-card-content { padding: 16px !important; }
}

/* Client logos: override template .row/.col system entirely within one-page */
.onepage-dashboard .row.client-items {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  height: 140px !important;
}

.onepage-dashboard .row.client-items::before,
.onepage-dashboard .row.client-items::after,
.onepage-dashboard .row.client-items > .clear {
  display: none !important;
}

.onepage-dashboard .row.client-items > .col {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  font-size: 14px !important;
}

.onepage-dashboard .row.client-items > .col.border-line-v::before {
  display: none !important;
}

.onepage-dashboard .client-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.onepage-dashboard .client-item .image {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.onepage-dashboard .client-item .image img {
  max-width: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Testimonial inactive pips: more visible */
.onepage-dashboard .swiper-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
}

.onepage-dashboard .swiper-pagination .swiper-pagination-bullet-active {
  background: #ff3344 !important;
}

/* Testimonial page counter */
.onepage-dashboard .testimonial-counter {
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}