/* Mobile & Tablet Responsive Styles for Team Member Pages */
/* Use with index-mob.css for hero and footer styling */

/* ============================================
   TABLET LANDSCAPE (1025px - 1440px)
   ============================================ */
@media (max-width: 1440px) and (min-width: 1025px) {
  .hero-section {
    padding: 18rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section .hero-text {
    color: #ffffff !important;
  }
  
  .hero-section .hero-text h1,
  .hero-section .hero-text p {
    color: #ffffff !important;
  }
  
  .breadcrumbs {
    padding: 2.5rem 2rem;
  }
  
  .team-member-profile {
    padding: 3rem 2rem !important;
    height: auto !important;
    min-height: 85vh !important;
  }
  
  .team-member-header h2 {
    font-size: 2.1rem !important;
  }
  
  .team-member-header p {
    font-size: 1.2rem !important;
  }
  
  .team-member-content {
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 200px !important;
    height: 260px !important;
  }
  
  .team-member-bio p {
    font-size: 1.15rem !important;
  }
}

/* ============================================
   TABLET PORTRAIT & LANDSCAPE (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hero-section {
    padding: 16rem 0 12rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section .hero-text {
    color: #ffffff !important;
  }
  
  .hero-section .hero-text h1,
  .hero-section .hero-text p {
    color: #ffffff !important;
  }
  
  .breadcrumbs {
    padding: 2.5rem 2rem;
  }
  
  .breadcrumbs ul {
    font-size: 0.95rem;
    padding-top: 0.5rem;
  }
  
  .team-member-profile {
    padding: 2.5rem 2rem !important;
    height: auto !important;
    min-height: auto !important;
    background: rgba(1, 39, 14, 0.92) !important;
  }
  
  .team-member-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .team-member-header h2 {
    font-size: 2rem !important;
    color: #ffe7a0 !important;
  }
  
  .team-member-header p {
    font-size: 1.15rem !important;
    color: #ab8d44 !important;
  }
  
  .team-member-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 280px !important;
    height: 340px !important;
    box-shadow: 0 4px 24px rgba(171, 141, 68, 0.6) !important;
  }
  
  .team-member-bio {
    max-width: 100%;
  }
  
  .team-member-bio p {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
  }
}

/* ============================================
   MOBILE LANDSCAPE & SMALL TABLET (601px - 767px)
   ============================================ */
@media (max-width: 767px) {
  .hero-section {
    padding: 12rem 0 10rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section .hero-text {
    color: #ffffff !important;
  }
  
  .hero-section .hero-text h1,
  .hero-section .hero-text p {
    color: #ffffff !important;
  }
  
  .breadcrumbs {
    padding: 2rem 1.5rem;
  }
  
  .breadcrumbs ul {
    font-size: 0.9rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  
  .breadcrumbs a,
  .breadcrumbs .breadcrumb-current {
    padding: 0.2rem 0;
  }
  
  .team-member-profile {
    padding: 2.2rem 1.5rem !important;
    height: auto !important;
    min-height: auto !important;
    background: rgba(1, 39, 14, 0.92) !important;
  }
  
  .team-member-header {
    text-align: center;
    margin-bottom: 1.8rem;
  }
  
  .team-member-header h2 {
    font-size: 1.85rem !important;
    color: #ffe7a0 !important;
  }
  
  .team-member-header p {
    font-size: 1.1rem !important;
    color: #ab8d44 !important;
  }
  
  .team-member-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.8rem !important;
    max-width: 95%;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 260px !important;
    height: 320px !important;
    box-shadow: 0 4px 24px rgba(171, 141, 68, 0.6) !important;
  }
  
  .team-member-bio {
    max-width: 100%;
    text-align: center;
  }
  
  .team-member-bio p {
    max-width: 90%;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #ffffff !important;
  }
}

/* ============================================
   MOBILE PORTRAIT (max 600px)
   ============================================ */
@media (max-width: 480px) {
  .hero-section {
    padding: 9rem 0 7rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
    padding: 1.6rem 1rem;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section {
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
    padding: 1.8rem 1.2rem;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .breadcrumbs ul {
    font-size: 0.88rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  
  .breadcrumbs a,
  .breadcrumbs .breadcrumb-current {
    padding: 0.2rem 0;
  }
  
  .breadcrumb-icon {
    width: 14px !important;
    height: 14px !important;
  }
  
  .team-member-profile {
    padding: 2rem 1.2rem !important;
    height: auto !important;
    min-height: auto !important;
    background: rgba(1, 39, 14, 0.92) !important;
  }
  
  .team-member-header {
    text-align: center;
    margin-bottom: 1.6rem;
  }
  
  .team-member-header h2 {
    font-size: 1.7rem !important;
    color: #ffe7a0 !important;
    margin-bottom: 0.3em !important;
  }
  
  .team-member-header p {
    font-size: 1.05rem !important;
    color: #ab8d44 !important;
    margin-bottom: 1.2em !important;
  }
  
  .team-member-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.6rem !important;
    max-width: 95%;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 240px !important;
    height: 300px !important;
    box-shadow: 0 4px 20px rgba(171, 141, 68, 0.5) !important;
    border-radius: 16px !important;
  }
  
  .team-member-bio {
    text-align: center;
  }
  
  .team-member-bio p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: #ffffff !important;
    margin-bottom: 1em !important;
  }
}

/* ============================================
   SMALL MOBILE (max 480px)
   ============================================ */
@media (max-width: 480px) {
  .hero-section {
    padding: 9rem 0 7rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section .hero-text {
    color: #ffffff !important;
  }
  
  .hero-section .hero-text h1,
  .hero-section .hero-text p {
    color: #ffffff !important;
  }
  
  .breadcrumbs {
    padding: 1.6rem 1rem;
  }
  
  .breadcrumbs ul {
    font-size: 0.85rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .breadcrumb-icon {
    width: 13px !important;
    height: 13px !important;
  }
  
  .team-member-profile {
    padding: 1.8rem 1rem !important;
    height: auto !important;
    min-height: auto !important;
    background: rgba(1, 39, 14, 0.92) !important;
  }
  
  .team-member-header {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  .team-member-header h2 {
    font-size: 1.6rem !important;
    color: #ffe7a0 !important;
    margin-bottom: 0.3em !important;
  }
  
  .team-member-header p {
    font-size: 1rem !important;
    color: #ab8d44 !important;
    margin-bottom: 1.1em !important;
  }
  
  .team-member-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.4rem !important;
    max-width: 95%;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 220px !important;
    height: 280px !important;
    box-shadow: 0 4px 18px rgba(171, 141, 68, 0.5) !important;
    border-radius: 15px !important;
  }
  
  .team-member-bio {
    text-align: center;
  }
  
  .team-member-bio p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #ffffff !important;
    margin-bottom: 0.95em !important;
  }
}

/* ============================================
   VERY SMALL MOBILE (max 375px)
   ============================================ */
@media (max-width: 375px) {
  .hero-section {
    padding: 8.5rem 0 6.5rem 0 !important;
    overflow: visible !important;
  }
  
  .breadcrumbs {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .team-member-profile {
    z-index: 1 !important;
    position: relative !important;
  }
  
  .mobile-nav-toggle {
    z-index: 9999999 !important;
  }

  /* Keep toggle button visible when menu is open */
  .hero-nav-btns-col.mobile-open ~ .mobile-nav-toggle,
  .mobile-nav-toggle,
  .mobile-nav-toggle.active {
    z-index: 9999999 !important;
    position: fixed !important;
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .hero-nav-btns-col.mobile-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1, 39, 14, 0.98) !important;
    z-index: 999998 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 6rem 2rem 2rem 2rem !important;
    margin: 0 !important;
  }
  
  .hero-section .hero-text {
    color: #ffffff !important;
  }
  
  .hero-section .hero-text h1,
  .hero-section .hero-text p {
    color: #ffffff !important;
  }
  
  .breadcrumbs {
    padding: 1.5rem 0.9rem;
  }
  
  .breadcrumbs ul {
    font-size: 0.82rem;
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .breadcrumb-icon {
    width: 12px !important;
    height: 12px !important;
  }
  
  .team-member-profile {
    padding: 1.6rem 0.9rem !important;
    height: auto !important;
    min-height: auto !important;
    background: rgba(1, 39, 14, 0.92) !important;
  }
  
  .team-member-header {
    text-align: center;
    margin-bottom: 1.4rem;
  }
  
  .team-member-header h2 {
    font-size: 1.5rem !important;
    color: #ffe7a0 !important;
    margin-bottom: 0.3em !important;
  }
  
  .team-member-header p {
    font-size: 0.95rem !important;
    color: #ab8d44 !important;
    margin-bottom: 1em !important;
  }
  
  .team-member-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.3rem !important;
    max-width: 95%;
    margin: 0 auto;
  }
  
  .team-member-photo {
    width: 200px !important;
    height: 260px !important;
    box-shadow: 0 4px 16px rgba(171, 141, 68, 0.5) !important;
    border-radius: 14px !important;
  }
  
  .team-member-bio {
    text-align: center;
  }
  
  .team-member-bio p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
    margin-bottom: 0.9em !important;
  }
}