/* ============================================
   SecureGuard - Master Stylesheet
   22개 파일 → 3개 병합 파일
   ============================================ */

/* Foundation: variables + reset + base + layout + utilities */
@import 'foundation.css';

/* Components: navigation, hero, buttons, cards, badges, forms,
   accordion, counter, pricing-table, testimonials, timeline,
   logo-ticker, footer, scroll-top */
@import 'components.css';

/* Theme: animations + responsive overrides */
@import 'theme.css';

/* ============================================
   Custom Visual Card Styles
   ============================================ */
.card--visual .card__image-container {
  position: relative;
  height: 140px; /* Slightly taller for better visibility */
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Negative margin to pull image to edges, compensating for card padding */
  margin: -24px -24px 24px -24px;
}

@media (max-width: 767px) {
  .card--visual .card__image-container {
    margin: -24px -24px 20px -24px;
    height: 120px;
  }
}

@media (max-width: 639px) {
  .card--visual .card__image-container {
    margin: -20px -20px 16px -20px;
  }
}

.card--visual .card__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card--visual:hover .card__image-container img {
  transform: scale(1.05);
}

.card--visual .card__title {
  margin-top: 0;
}

/* ============================================
   Vertex Home Overrides
   ============================================ */
.hero h1 {
  font-size: clamp(2.4rem, 3.6vw, 45px);
  line-height: 1.1;
}

.section-header p.products-overview__lead {
  font-size: 17px;
}

@media (max-width: 1023px) {
  .mobile-wide-frame {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: var(--radius-xl) !important;
  }

  .mobile-wide-frame img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}