/* =============================================
   HONTORIA — aboutus.css
   Page-specific styles only.
   Header & footer styles are in shared.css
   ============================================= */

/* ========== CSS VARIABLES ========== */
:root {
    --y:         #FFD000;
    --dk:        #1A0800;
    --red:       #CC1A00;
    --black:     #0a0a0a;
    --white:     #ffffff;
    --gray:      #6b7280;
    --light:     #f3f4f6;
    --border:    #e5e7eb;
    --blue-fb:   #1877f2;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.18);
    --radius:    8px;
    --radius-md: 14px;
    --tr:        0.28s cubic-bezier(0.4,0,0.2,1);
    --hh:        72px;
    --bh:        36px;
}

/* ========== ABOUT PAGE LAYOUT ========== */
.about-container {
    display:     flex;
    align-items: flex-start;
    min-height:  100vh;
    position:    relative;
}

.about-content {
    flex:      1;
    min-width: 0;
    z-index:   1;
}

/* ========== ABOUT SIDEBAR ========== */
.about-sidebar {
    width:        220px;
    min-width:    220px;
    flex-shrink:  0;
    background:   var(--white);
    border-right: 2px solid var(--border);
    padding:      32px 0;
    position:     sticky;
    top:          calc(var(--hh) + var(--bh));
    height:       calc(100vh - var(--hh) - var(--bh));
    overflow-y:   auto;
    /* FIX 2: Lowered z-index so it scrolls safely UNDER the main header */
    z-index:      10; 
}

.about-sidebar-brand {
    padding:       0 20px 20px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}

.about-sidebar-title {
    font-size:      11px;
    font-weight:    900;
    letter-spacing: 3px;
    color:          var(--gray);
    text-transform: uppercase;
}

.about-sidebar-pages {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 8px;
    margin-bottom:  8px;
}

.about-sidebar-page-link {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.5px;
    color:          var(--dk);
    padding:        9px 12px;
    border-radius:  var(--radius);
    transition:     background var(--tr), color var(--tr);
    text-decoration:none;
}

.about-sidebar-page-link:hover {
    background: rgba(26,8,0,0.06);
    color:      var(--red);
}

.about-sidebar-divider {
    height:     1px;
    background: var(--border);
    margin:     8px 16px 12px;
}

.about-sidebar-nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 8px;
}

.about-sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    font-size:       13px;
    font-weight:     600;
    color:           var(--gray);
    padding:         10px 12px;
    border-radius:   var(--radius);
    transition:      background var(--tr), color var(--tr);
    text-decoration: none;
}

.about-sidebar-link:hover {
    background: rgba(26,8,0,0.06);
    color:      var(--dk);
}

/* =========================================================
   SCROLL SPY ACTIVE STATE 
   This is the exact code that turns the sidebar text RED 
   and gives it a light red background when scrolling!
   ========================================================= */
.about-sidebar-link.active {
    background:  rgba(204,26,0,0.08);
    color:       var(--red);
    font-weight: 800;
}

.about-sidebar-icon {
    font-size:  13px;
    width:      16px;
    text-align: center;
    color:      inherit;
}

/* ========== PAGE HERO ========== */
.page-hero {
    background: var(--black);
    padding:    64px 32px;
    text-align: center;
    position:   relative;
    overflow:   hidden;
    /* Ensures it takes up the full width now that it is outside the sidebar */
    width:      100%;
}

.page-hero::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(rgba(255,208,0,0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,208,0,0.04) 1px, transparent 1px);
    background-size:  40px 40px;
}

.page-hero-eyebrow {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    color:          var(--y);
    text-transform: uppercase;
    margin-bottom:  12px;
    position:       relative;
}

.page-hero-title {
    font-weight:    900;
    font-size:      clamp(36px, 5vw, 64px);
    letter-spacing: -1.5px;
    color:          var(--white);
    margin-bottom:  16px;
    position:       relative;
}

.page-hero-title span {
    color: var(--red);
}

.page-hero-sub {
    font-size:   16px;
    color:       rgba(255,255,255,0.55);
    max-width:   520px;
    margin:      0 auto;
    position:    relative;
    line-height: 1.7;
}

/* ========== SECTION SHARED ========== */
.section {
    padding: 80px 32px;
}

.section-inner {
    max-width: 1100px;
    margin:    0 auto;
}

.section-eyebrow {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 3px;
    color:          var(--red);
    text-transform: uppercase;
    margin-bottom:  10px;
}

.section-title {
    font-weight:    900;
    font-size:      clamp(28px, 4vw, 44px);
    letter-spacing: -1px;
    color:          var(--dk);
    margin-bottom:  16px;
}

.section-line {
    width:         60px;
    height:        3px;
    background:    var(--red);
    border-radius: 2px;
    margin-bottom: 40px;
}

.section-desc {
    font-size:   15px;
    line-height: 1.8;
    color:       var(--gray);
    max-width:   680px;
}

/* ========== HISTORY ========== */
.history-section {
    background: var(--white);
}

.history-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   60px;
    align-items:           center;
}

.history-text p {
    font-size:     15px;
    line-height:   1.9;
    color:         var(--gray);
    margin-bottom: 16px;
}
.history-text o {
    font-size:     15px;
    line-height:   1.9;
    color:         var(--red);
    margin-bottom: 16px;
}

.history-text p:last-child {
    margin-bottom: 0;
}

.history-img-wrap {
    position: relative;
}

.history-img {
    width:         100%;
    height:        auto;
    display:       block;
    border-radius: var(--radius-md);
    border:        3px solid var(--dk);
    box-shadow:    8px 8px 0 var(--y);
}

.history-img-placeholder {
    width:           100%;
    aspect-ratio:    4/3;
    background:      linear-gradient(135deg, #fff5cc, #ffe57a);
    border-radius:   var(--radius-md);
    border:          3px solid var(--dk);
    box-shadow:      8px 8px 0 var(--y);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
}

.history-img-placeholder i {
    font-size: 48px;
    color:     rgba(26,8,0,0.2);
}

.history-img-placeholder span {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 1px;
    color:          rgba(26,8,0,0.35);
}

.history-badge {
    position:      absolute;
    bottom:        -16px;
    right:         -16px;
    background:    var(--red);
    color:         var(--white);
    padding:       14px 20px;
    border-radius: var(--radius-md);
    font-weight:   900;
    font-size:     13px;
    letter-spacing:1px;
    box-shadow:    var(--shadow-md);
}

.history-badge span {
    display:     block;
    font-size:   28px;
    font-weight: 900;
    line-height: 1;
}

/* ========== WORKPLACE AREAS ========== */
.workplace-section {
    background: var(--white);
}

.areas-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   24px;
}

.area-card {
    background:    var(--light);
    border:        2px solid var(--border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    transition:    transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}

.area-card:hover {
    transform:    translateY(-6px);
    box-shadow:   var(--shadow-md);
    border-color: var(--dk);
}

.area-img {
    width:        100%;
    aspect-ratio: 4/3;
    object-fit:   cover;
    display:      block;
}

.area-img-placeholder {
    width:           100%;
    aspect-ratio:    4/3;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             10px;
}

.area-img-placeholder i  { font-size: 40px; }
.area-img-placeholder span { font-size: 11px; font-weight: 700; letter-spacing: 1px; }

.area-layout { background: linear-gradient(135deg, #e8f4fd, #c8e6f9); }
.area-layout i, .area-layout span { color: #1a6b9a; }

.area-print  { background: linear-gradient(135deg, #fde8e8, #f9c8c8); }
.area-print i, .area-print span { color: #9a1a1a; }

.area-tailor { background: linear-gradient(135deg, #e8fde8, #c8f9c8); }
.area-tailor i, .area-tailor span { color: #1a7a1a; }

.area-heat   { background: linear-gradient(135deg, #fdf3e8, #f9dfc8); }
.area-heat i, .area-heat span { color: #9a5a1a; }

.area-info {
    padding: 18px 20px;
}

.area-name {
    font-weight:   800;
    font-size:     16px;
    color:         var(--dk);
    margin-bottom: 6px;
}

.area-desc {
    font-size:   13px;
    color:       var(--gray);
    line-height: 1.6;
}
/* ========== LOCATION ========== */
.location-section {
    background: var(--white);
}

.location-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   48px;
    align-items:           stretch;
}

.location-map-wrap {
    width:         100%;
    min-height:    380px;
    border-radius: var(--radius-md);
    border:        3px solid var(--dk);
    box-shadow:    8px 8px 0 var(--y);
    overflow:      hidden;
    display:       flex;
}

.location-map-wrap iframe {
    width:   100%;
    flex:    1;
    display: block;
    border:  0;
}

.location-img {
    width:         100%;
    aspect-ratio:  16/10;
    object-fit:    cover;
    border-radius: var(--radius-md);
    border:        3px solid var(--dk);
    box-shadow:    8px 8px 0 var(--y);
}

.location-img-placeholder {
    width:           100%;
    aspect-ratio:    16/10;
    background:      linear-gradient(135deg, #e8f4e8, #c8f0c8);
    border-radius:   var(--radius-md);
    border:          3px solid var(--dk);
    box-shadow:      8px 8px 0 var(--y);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
}

.location-img-placeholder i {
    font-size: 52px;
    color:     rgba(26,8,0,0.2);
}

.location-img-placeholder span {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 1px;
    color:          rgba(26,8,0,0.35);
}

.location-details {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.location-item {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    padding:     16px;
    background:  var(--light);
    border-radius:var(--radius);
    border-left: 4px solid var(--red);
}

.location-item i {
    font-size:  18px;
    color:      var(--red);
    margin-top: 2px;
    flex-shrink:0;
}

.location-item-text strong {
    display:       block;
    font-size:     14px;
    font-weight:   800;
    color:         var(--dk);
    margin-bottom: 4px;
}

.location-item-text span {
    font-size:   13px;
    color:       var(--gray);
    line-height: 1.5;
}

/* ========== OWNER ========== */
.owner-section {
    background: var(--white);
}

.owner-layout {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   48px;
    align-items:           center;
}

.owner-img-wrap {
    text-align: center;
}

.owner-img {
    width:         200px;
    height:        200px;
    object-fit:    cover;
    border-radius: 50%;
    border:        5px solid var(--dk);
    box-shadow:    0 0 0 4px var(--red), var(--shadow-lg);
}

.owner-img-placeholder {
    width:           200px;
    height:          200px;
    border-radius:   50%;
    border:          5px solid var(--dk);
    box-shadow:      0 0 0 4px var(--red), var(--shadow-lg);
    background:      var(--light);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
}

.owner-img-placeholder i {
    font-size: 52px;
    color:     rgba(26,8,0,0.2);
}

.owner-tag {
    display:        inline-block;
    background:     var(--red);
    color:          var(--white);
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding:        6px 16px;
    border-radius:  99px;
    margin-top:     12px;
}

.owner-info .owner-name {
    font-weight:    900;
    font-size:      clamp(28px, 4vw, 42px);
    letter-spacing: -1px;
    color:          var(--dk);
    margin-bottom:  8px;
}

.owner-info .owner-title {
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  20px;
}

.owner-info .owner-bio {
    font-size:   15px;
    line-height: 1.8;
    color:       rgba(26,8,0,0.7);
    max-width:   560px;
}

/* ========== STAFF / EMPLOYEES ========== */
.employees-section {
    background: var(--light);
}

.staff-groups {
    display:        flex;
    flex-direction: column;
    gap:            48px;
    margin-top:     8px;
}

.staff-role-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 24px;
}

.staff-role-icon {
    font-size:  16px;
    color:      var(--red);
    width:      20px;
    text-align: center;
}

.staff-role-label {
    font-size:      13px;
    font-weight:    800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--dk);
    white-space:    nowrap;
}

.staff-role-line {
    flex:          1;
    height:        2px;
    background:    var(--border);
    border-radius: 2px;
}

.staff-cards {
    display:   flex;
    flex-wrap: wrap;
    gap:       24px;
}

.staff-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    width:          140px;
}

.staff-photo {
    width:         120px;
    height:        120px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--dk);
    display:       block;
}

.staff-photo-placeholder {
    width:           120px;
    height:          120px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #f0f0f0, #e0e0e0);
    border:          3px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.staff-photo-placeholder i {
    font-size: 40px;
    color:     rgba(26,8,0,0.15);
}

.staff-photo-empty {
    border:     3px dashed var(--border);
    background: transparent;
}

.staff-photo-empty i {
    font-size: 32px;
    color:     rgba(26,8,0,0.1);
}

.staff-name {
    font-size:   14px;
    font-weight: 700;
    color:       var(--dk);
    text-align:  center;
}

.staff-name-empty {
    font-size:   12px;
    font-weight: 600;
    color:       var(--gray);
    font-style:  italic;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .about-sidebar                { display: none; }
    .history-layout,
    .location-layout              { grid-template-columns: 1fr; }
    .owner-layout                 { grid-template-columns: 1fr; text-align: center; }
    .owner-img-wrap               { display: flex; flex-direction: column; align-items: center; }
}

@media (max-width: 640px) {
    :root                         { --hh: 60px; --bh: 32px; }
    .section                      { padding: 52px 16px; }
    .page-hero                    { padding: 48px 16px; }
    .employees-header             { flex-direction: column; align-items: flex-start; }
}