/* ==========================================
   Responsive Styles - Mobile First
   SISOBIO Corporate Website
   ========================================== */

/* ==========================================
   MOBILE (< 768px) - Default Styles
   ========================================== */

/* Mobile styles are defined as default in layout.css and components.css */

/* ===== Mobile Specific Overrides ===== */

@media (max-width: 767px) {

  /* Address Text - Adjust font size on Mobile */
  .address-text {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* Hero Section */
  .hero {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
    /* Limit to 2 lines */
    word-break: keep-all;
    overflow-wrap: break-word;
    
    /* Mobile: 모바일 배경 이미지 + Parallax 비활성화 */
    background-image: url('../images/hero/ocean_mobile.webp');
    background-attachment: scroll; /* 모바일: 성능을 위해 Parallax 끔 */
  }
  
  .hero__title {
    font-size: 1.5rem; /* 24px */
    line-height: 1.3;
    /* Limit to 2 lines */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  /* Force line break for title */
  .hero__title-line {
    display: block;
  }
  
  .hero__subtitle {
    font-size: 1rem; /* 16px */
  }
  
  /* Force line break for subtitle */
  .hero__subtitle-line {
    display: block;
  }
  
  .hero__cta {
    flex-direction: column;
    width: 100%;
  }
  
  .hero__cta .btn {
    width: 100%;
  }
  
  /* Section Headers */
  .section__title {
    font-size: 1.75rem; /* 28px */
  }
  
  .section__description {
    font-size: 0.875rem; /* 14px */
  }
  
  /* About Timeline - Mobile Optimization */
  .about__timeline {
    padding: var(--spacing-2xl) var(--spacing-md); /* 상하 48px (기업개요와 동일), 좌우 16px (최소화) */
  }

  /* "연혁" 제목을 "기업 개요" 제목과 동일한 왼쪽 여백으로 정렬 */
  .about__timeline .about__subtitle {
    margin-left: var(--spacing-xl); /* 16px + 32px = 48px (기업 개요와 동일) */
  }

  .timeline {
    padding-left: 20px; /* 32px → 20px: 타임라인 좌측 여백 축소 */
  }

  .timeline::before {
    left: 5px; /* 타임라인 선 위치 */
  }

  .timeline__item {
    margin-bottom: var(--spacing-xl); /* 32px: 년도별 간격 */
    padding-left: 15px; /* 24px → 15px: 텍스트 좌측 여백 축소 */
  }

  .timeline__item:last-child {
    margin-bottom: 0;
  }

  .timeline__item::before {
    left: -20px; /* 점 위치 - 선 중앙에 정렬 */
    width: 12px;
    height: 12px;
    top: 6px;
  }

  /* Timeline events list - 년도 안의 목록 스타일 */
  .timeline__events {
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-sm);
  }

  .timeline__events li {
    position: relative;
    padding-left: var(--spacing-md); /* 16px */
    margin-bottom: var(--spacing-sm); /* 8px: 이벤트 간 간격 */
    line-height: 1.6;
  }

  .timeline__events li:last-child {
    margin-bottom: 0;
  }

  .timeline__events li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-text-tertiary);
    font-size: 0.875rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  .footer__bottom {
    flex-direction: column;
    align-items: center;
  }

}


/* ==========================================
   TABLET (768px - 1024px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  
  /* Container Padding */
  .container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
  
  /* Navigation */
  .nav {
    height: 72px;
  }
  
  /* Hero Section */
  .hero {
    /* Tablet: 태블릿 배경 이미지 */
    background-image: url('../images/hero/ocean_tablet.webp');
    /* Parallax 효과 유지 (태블릿에서는 성능 괜찮음) */
    background-attachment: fixed;
  }
  
  .hero__title {
    font-size: 2.5rem; /* 40px */
  }

  /* One line for title on tablet */
  .hero__title-line {
    display: inline;
  }

  .hero__title-line:first-child::after {
    content: " ";
  }
  
  .hero__subtitle {
    font-size: 1.125rem; /* 18px */
  }
  
  /* Keep line break on tablet */
  .hero__subtitle-line {
    display: block;
  }
  
  /* Section Spacing */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }
  
  /* Grids: 2 columns for most content */
  .business__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .certifications__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ==========================================
   DESKTOP (≥ 1025px)
   ========================================== */

@media (min-width: 1025px) {
  
  /* Container Padding */
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
  
  /* Navigation */
  .nav {
    height: 80px;
  }
  
  /* Section Spacing */
  .section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
  }
  
  /* Hero Section */
  .hero {
    /* Desktop: 데스크톱 배경 이미지 + Parallax */
    background-image: url('../images/hero/ocean_desktop.webp');
    background-attachment: fixed; /* Parallax 효과 */
  }
  
  .hero__title {
    font-size: 3rem; /* 48px */
  }

  /* One line for title on desktop */
  .hero__title-line {
    display: inline;
  }

  .hero__title-line:first-child::after {
    content: " ";
  }
  
  .hero__subtitle {
    font-size: 1.25rem; /* 20px */
  }
  
  /* Keep line break on desktop */
  .hero__subtitle-line {
    display: block;
  }
  
  /* Grids: 3 columns for most content */
  .business__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .certifications__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Footer Grid */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Products Intro Highlights - 2 columns for desktop */
  .products__intro-highlights {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ==========================================
   LARGE DESKTOP (≥ 1440px)
   ========================================== */

@media (min-width: 1440px) {
  
  /* Hero Content */
  .hero__content {
    max-width: 800px;
  }
  
  /* Section Description */
  .section__description {
    max-width: 700px;
  }
  
}


/* ==========================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================== */

/* Increase touch target sizes on mobile */
@media (max-width: 767px) {
  
  /* Minimum 44px touch targets */
  .btn,
  .btn-icon,
  .tab,
  .nav__menu a {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Navigation Links */
  .mobile-menu__nav a {
    padding: var(--spacing-md) 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  

}

/* Prevent iOS text size adjustment */
@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
  }
}

/* Smooth scrolling for mobile */
html {
  -webkit-overflow-scrolling: touch;
}

/* Remove tap highlight on touch devices */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Safe Area for devices with notch */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.header {
  top: env(safe-area-inset-top);
}


/* ==========================================
   HOVER STATES (Desktop Only)
   ========================================== */

/* Only show hover effects on devices with hover capability */
@media (hover: hover) and (pointer: fine) {
  
  .btn:hover,
  .business-card:hover,
  .product-card:hover,
  .cert-card:hover {
    /* Hover effects defined in components.css */
  }
  
}

/* Disable hover transforms on touch devices */
@media (hover: none) {
  
  .btn:hover,
  .business-card:hover,
  .product-card:hover,
  .cert-card:hover {
    transform: none;
  }
  
}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Parallax 효과 비활성화 */
  .hero,
  .products__intro--hero {
    background-attachment: scroll !important;
  }
  
  .hero__scroll {
    animation: none;
  }
  
}


/* ==========================================
   HIGH CONTRAST MODE
   ========================================== */

@media (prefers-contrast: high) {
  
  :root {
    --color-border-light: #000000;
    --color-border-medium: #000000;
  }
  
  [data-theme="dark"] {
    --color-border-light: #FFFFFF;
    --color-border-medium: #FFFFFF;
  }
  
  .btn {
    border-width: 3px;
  }
  
}


/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  
  /* Hide non-essential elements */
  .header,
  .hero__scroll,
  .btn,
  .mobile-menu {
    display: none !important;
  }
  
  /* Adjust colors for print */
  body {
    background-color: #FFFFFF;
    color: #000000;
  }
  
  /* Remove shadows */
  .business-card,
  .product-card,
  .cert-card {
    box-shadow: none;
    border: 1px solid #000000;
  }
  
  /* Page breaks */
  .section {
    page-break-inside: avoid;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
  
  /* Links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666666;
  }
  
}


/* ==========================================
   LANDSCAPE ORIENTATION (Mobile)
   ========================================== */

@media (max-width: 767px) and (orientation: landscape) {
  
  /* Reduce hero height in landscape */
  .hero {
    min-height: 400px;
    max-height: 500px;
  }
  
  /* Adjust navigation height */
  .nav {
    height: 60px;
  }
  
}


/* ==========================================
   EXTRA WIDE SCREENS (≥ 1920px)
   ========================================== */

@media (min-width: 1920px) {
  
  /* Limit container max-width */
  .container {
    max-width: 1400px;
  }
  
  /* Increase section padding */
  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  
}


/* ==========================================
   RESPONSIVE IMAGES
   ========================================== */

/* Ensure images scale properly */
img {
  max-width: 100%;
  height: auto;
}

/* Picture element for responsive images */
picture {
  display: block;
  width: 100%;
}

picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lazy loading placeholder */
img[loading="lazy"] {
  min-height: 200px;
  background-color: var(--color-bg-secondary);
}


/* ==========================================
   RESPONSIVE TYPOGRAPHY
   ========================================== */

/* Already defined in variables.css */
/* Mobile: --font-size-h1: 2rem (32px) */
/* Tablet: --font-size-h1: 2.5rem (40px) */
/* Desktop: --font-size-h1: 3rem (48px) */


/* ==========================================
   ACCESSIBILITY - SCREEN READERS
   ========================================== */

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}


/* ==========================================
   RESPONSIVE GRID FALLBACK
   ========================================== */

/* Fallback for browsers without Grid support */
@supports not (display: grid) {
  
  .business__grid,
  .products__grid,
  .certifications__grid,
  .footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--card-gap-mobile);
  }
  
  .business-card,
  .product-card,
  .cert-card,
  .footer__links-column {
    flex: 1 1 100%;
  }
  
  @media (min-width: 768px) {
    .business-card,
    .product-card,
    .cert-card {
      flex: 1 1 calc(50% - var(--card-gap-tablet));
    }
  }
  
  @media (min-width: 1025px) {
    .business-card,
    .product-card,
    .cert-card {
      flex: 1 1 calc(33.333% - var(--card-gap-desktop));
    }
  }
  
}


/* ==========================================
   PRODUCTS INTRO HERO - RESPONSIVE
   ========================================== */

/* Mobile */
@media (max-width: 767px) {
  .products__intro {
    min-height: 400px;
    margin-bottom: var(--spacing-2xl, 48px);
    border-radius: 8px;
  }

  .products__intro-content {
    padding: var(--spacing-2xl, 32px) var(--spacing-md, 16px);
  }

  .products__intro-symbol {
    width: 140px;
    margin-bottom: var(--spacing-lg, 20px);
  }

  .products__intro-title {
    font-size: 1.75rem;
  }
  
  .products__intro-description {
    font-size: 1rem;
    margin-bottom: var(--spacing-xl, 24px);
  }
  
  /* Description 줄바꿈 - 모바일에서도 명확한 분리 */
  .products__intro-description-line {
    display: block;
    margin-bottom: var(--spacing-sm, 12px);
  }
  
  .products__intro-highlights {
    grid-template-columns: 1fr;
    gap: var(--spacing-md, 16px);
  }
  
  .products__intro-highlight {
    font-size: 0.875rem;
    padding: var(--spacing-sm, 12px);
  }
  
  /* Reduce animation complexity on mobile */
  .products__intro-highlight:nth-child(n) {
    animation-delay: 0.3s;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .products__intro {
    min-height: 450px;
  }

  .products__intro-content {
    padding: var(--spacing-3xl, 48px) var(--spacing-xl, 24px);
  }

  .products__intro-symbol {
    width: 170px;
    margin-bottom: var(--spacing-xl, 28px);
  }

  .products__intro-title {
    font-size: 2.25rem;
  }
  
  .products__intro-description {
    font-size: 1.125rem;
  }
  
  /* Description 줄바꿈 스타일 */
  .products__intro-description-line {
    display: block;
    margin-bottom: var(--spacing-md, 14px);
  }
  
  .products__intro-highlights {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md, 16px);
  }
}