/**
 * Ocean Mafia - Responsive Styles
 * Tablet and Mobile Optimization
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TABLET (768px - 1023px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 1023px) {
  .hero .logo {
    font-size: 52px;
  }
  
  .hero .tagline {
    font-size: 20px;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  
  .portfolio-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE (< 768px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
  /* Language Switcher */
  .language-switcher {
    top: 20px;
    right: 20px;
    font-size: 12px;
  }
  
  /* Hero */
  .hero {
    padding: 80px 20px 60px;
  }
  
  .hero .logo {
    font-size: 36px;
    letter-spacing: 0.1em;
  }
  
  .hero .divider {
    width: 200px;
    margin-bottom: 20px;
  }
  
  .hero .tagline {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .hero .subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }
  
  .hero .cta-button {
    padding: 14px 32px;
    font-size: 14px;
  }
  
  /* Section Titles */
  .section-title {
    font-size: 28px !important;
  }
  
  /* Vision */
  .vision {
    padding: 80px 20px;
  }
  
  .vision .catchphrase {
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  .vision .content {
    font-size: 15px;
  }
  
  /* Mission */
  .mission {
    padding: 80px 20px;
  }
  
  .mission .mission-statement {
    font-size: 16px;
    margin-bottom: 30px;
  }
  
  .mission .content {
    font-size: 15px;
  }
  
  /* Values */
  .values {
    padding: 80px 20px;
  }
  
  .values .section-title {
    margin-bottom: 40px;
  }
  
  .values-grid {
    gap: 20px;
  }
  
  .value-card {
    padding: 30px;
  }
  
  .value-card h3 {
    font-size: 20px;
  }
  
  .value-card .value-phrase {
    font-size: 16px;
  }
  
  .value-card .value-description {
    font-size: 14px;
  }
  
  /* Expertise */
  .expertise {
    padding: 80px 20px;
  }
  
  .expertise .section-title {
    margin-bottom: 40px;
  }
  
  .expertise-grid {
    gap: 20px;
  }
  
  .expertise-card {
    padding: 30px;
  }
  
  .expertise-card h3 {
    font-size: 20px;
  }
  
  .expertise-card p {
    font-size: 15px;
  }
  
  /* Portfolio */
  .portfolio {
    padding: 80px 20px;
  }
  
  .portfolio .section-title {
    margin-bottom: 40px;
  }
  
  .portfolio-grid {
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .portfolio-card {
    padding: 30px;
  }
  
  .portfolio-card h3 {
    font-size: 24px;
  }
  
  .portfolio-card .platform-subtitle {
    font-size: 14px;
  }
  
  .portfolio-card p {
    font-size: 14px;
  }
  
  .portfolio-coming-soon {
    padding: 30px;
  }
  
  .portfolio-coming-soon h3 {
    font-size: 20px;
  }
  
  .portfolio-coming-soon p {
    font-size: 14px;
  }
  
  /* Members */
  .members {
    padding: 80px 20px;
  }
  
  .members .content {
    font-size: 15px;
  }
  
  /* Contact */
  .contact {
    padding: 80px 20px;
  }
  
  .contact .section-title {
    font-size: 26px;
  }
  
  .contact .content {
    font-size: 15px;
  }
  
  .contact .email {
    font-size: 18px;
  }
  
  /* Footer */
  footer {
    padding: 40px 20px 30px;
  }
  
  footer .footer-subtitle,
  footer .footer-email {
    font-size: 13px;
  }
  
  footer .copyright {
    font-size: 11px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMALL MOBILE (< 480px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 479px) {
  .hero .logo {
    font-size: 28px;
  }
  
  .hero .divider {
    width: 150px;
  }
  
  .hero .tagline {
    font-size: 14px;
  }
  
  .hero .subtitle {
    font-size: 13px;
  }
  
  .section-title {
    font-size: 24px !important;
  }
  
  .value-card,
  .expertise-card,
  .portfolio-card {
    padding: 25px;
  }
}