/* ==========================================================================
   Our Team Block — Extracted inline styles
   Source: themes/HSJTRAVEL/Tour/Views/frontend/blocks/ourteam/index.blade.php
   ========================================================================== */

.hsj-team-section { padding: 60px 0; }
.hsj-team-section:nth-child(even) { background: #f4f7fb; }
.hsj-team-section-header { margin-bottom: 36px; }
.hsj-team-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #E07A1B; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.hsj-team-eyebrow-line { width: 22px; height: 1px; background: #E07A1B; }
.hsj-team-header-row { display: flex; align-items: baseline; gap: 16px; }
.hsj-team-section-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3vw, 36px); font-weight: 500; color: #111827; letter-spacing: -0.5px; line-height: 1.1; margin: 0; }
.hsj-team-section-title em { font-style: italic; color: #1A4B89; }
.hsj-team-count { font-size: 13px; color: rgba(55,65,90,0.5); white-space: nowrap; }

.hsj-team-grid { display: grid; gap: 24px; }
.hsj-team-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hsj-team-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hsj-team-grid--5 { grid-template-columns: repeat(5, 1fr); }

.hsj-team-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    display: flex;
    flex-direction: column;
}
.hsj-team-card[role="button"] { cursor: pointer; }
.hsj-team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.1); border-color: rgba(26,75,137,0.2); }

.hsj-team-card-photo { aspect-ratio: 3/4; overflow: hidden; position: relative; background: #f4f7fb; }
.hsj-team-card--compact .hsj-team-card-photo { aspect-ratio: 1/1; }
.hsj-team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.5s; }
.hsj-team-card:hover .hsj-team-card-photo img { transform: scale(1.05); }
.hsj-team-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,42,79,0.7) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; }
.hsj-team-card:hover .hsj-team-card-overlay { opacity: 1; }
.hsj-team-card-bio-btn { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%) translateY(4px); background: #fff; color: #1A4B89; font-size: 11px; font-weight: 600; padding: 6px 16px; border-radius: 100px; white-space: nowrap; opacity: 0; transition: opacity 0.3s, transform 0.3s; font-family: 'Poppins', system-ui, sans-serif; }
.hsj-team-card:hover .hsj-team-card-bio-btn { opacity: 1; transform: translateX(-50%) translateY(0); }

.hsj-team-card-body { padding: 16px 18px 18px; flex: 1; }
.hsj-team-card--compact .hsj-team-card-body { padding: 12px 14px 14px; }
.hsj-team-card-name { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 600; color: #111827; margin: 0 0 3px; line-height: 1.2; }
.hsj-team-card--compact .hsj-team-card-name { font-size: 14px; }
.hsj-team-card-role { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #E07A1B; }

/* Bio Modal */
.hsj-bio-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,42,79,0.6); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hsj-bio-overlay.open { opacity: 1; pointer-events: all; }
.hsj-bio-modal { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,0.2); transform: translateY(20px); transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.hsj-bio-overlay.open .hsj-bio-modal { transform: translateY(0); }
.hsj-bio-modal-header { display: flex; align-items: center; gap: 18px; padding: 24px 28px 20px; border-bottom: 1px solid rgba(0,0,0,0.08); flex-shrink: 0; }
.hsj-bio-modal-photo { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid #f4f7fb; }
.hsj-bio-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hsj-bio-modal-name { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; color: #111827; line-height: 1.2; }
.hsj-bio-modal-role { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #E07A1B; margin-top: 3px; }
.hsj-bio-modal-close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: #f4f7fb; border: 1px solid rgba(0,0,0,0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(55,65,90,0.65); flex-shrink: 0; transition: background 0.2s; }
.hsj-bio-modal-close:hover { background: #1A4B89; color: #fff; border-color: #1A4B89; }
.hsj-bio-modal-body { padding: 24px 28px; overflow-y: auto; }
.hsj-bio-modal-text { font-size: 14px; line-height: 1.85; color: rgba(55,65,90,0.65); font-weight: 300; margin: 0; }

@media (max-width: 1200px) {
    .hsj-team-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .hsj-team-grid--5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .hsj-team-section { padding: 44px 0; }
    .hsj-team-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .hsj-team-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hsj-team-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .hsj-team-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .hsj-team-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hsj-team-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .hsj-team-card-body { padding: 10px 12px 12px; }
    .hsj-team-card-name { font-size: 13px; }
    .hsj-team-card-role { font-size: 10px; }
}