/* ==========================================================================
   Layout & spacing - DBIM v3.0 consistency rules
   Loaded last (after typography.css). Only spacing, alignment and sizing live
   here; colours stay in colours.css and type in typography.css.

   Spacing scale (4 px base, 8 px rhythm):
     --space-1 4 | --space-2 8 | --space-3 12 | --space-4 16 | --space-5 24 | --space-6 32 | --space-7 48
   DBIM rules applied: body text left-aligned (4.1.1), uniform button padding
   (4.5), icon sizes 24/32/48/64 px (3.7), 1:1 headshots (6.1.4).
   To undo: remove the <link> to layout.css in partials/header.blade.php.
   ========================================================================== */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --control-h: 40px;
    --radius: 10px;
}

/* ---------- Header: logo left, utilities right, one shared control height ---------- */
body .header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) 0;           /* container already supplies the side gutter */
}
body .header-container .logo { margin-right: auto; }
body .header-container .social-icons { display: flex; align-items: center; gap: var(--space-2); }
body .header-container .social-icons a {
    margin: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
}
body .header-container form { margin: 0; }
body .search-box { margin: 0; height: var(--control-h); border-radius: 4px; box-sizing: border-box; }
body .search-box input { height: 100%; padding: 0 var(--space-3); box-sizing: border-box; }
body .search-box button { height: 100%; padding: 0 var(--space-3); }
body .translator-box { display: flex; align-items: center; }
body #google_translate_element { height: var(--control-h); border-radius: 4px; }
body #google_translate_element .goog-te-gadget-simple {
    display: flex !important; align-items: center;
    height: var(--control-h); box-sizing: border-box;
    padding: 0 var(--space-3) !important;
    border: 1px solid var(--color-grey-01) !important;
    border-radius: 4px !important;
    background: var(--color-white) !important;
}

/* ---------- Main navigation: comfortable 48 px bar (it had collapsed to ~27 px) ---------- */
@media (min-width: 1025px) {
    body .mainNavigation #nav > li > a {
        display: inline-block;
        padding: var(--space-3) var(--space-4);
        line-height: 1.5;
    }
}

/* ---------- Ticker + performance banner ---------- */
body .modal_1 { margin-top: 0 !important; }
body #marquees .marques_con { padding: var(--space-2) var(--space-4); }
body #contentStart.contentPart { margin: var(--space-5) auto; }
body .mea_perf { padding: 0; }

/* ---------- Home: services panel (tiles + profile cards) ---------- */
body .main-section {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-5);
    width: 100% !important;             /* style.css shrinks it to 28% below 425 px */
    margin: 0 0 var(--space-6);
    box-sizing: border-box;
}
body .main-section > div:first-child {   /* left column */
    display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; flex: none;
}
body .grid-section { gap: var(--space-4); flex: 1 1 auto; grid-auto-rows: minmax(88px, 1fr); }
body .grid-box {
    height: auto; min-height: 88px;
    padding: var(--space-3) var(--space-4);
    justify-content: center; text-align: center;
    box-sizing: border-box;
}
body .grid-box p { margin: 0; text-align: center; }
body .main-section .views-field { flex: 0 0 auto; height: auto; min-height: 0; }
body .main-section .views-field .field-content,
body .main-section .views-field .field-content > a { display: block; }
body .main-section .cbps_banner {
    display: block; width: 100%;
    height: auto !important;             /* natural 1800x500 ratio; the fixed height used to stretch it */
    aspect-ratio: 1800 / 500;
    margin: 0 !important;                /* inline margin-top:41px broke the 16 px rhythm */
}

/* right column: stacked cards, equal gaps, stretch to the left column's height */
body .profile-section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
body .profile-section > br { display: none; }
body .profile-card, body .profiles-card, body .profiles-card1, body .profiles-cards {
    width: 100%; height: auto; margin: 0; box-sizing: border-box;
    padding: var(--space-4);
}
body .profile-card { flex: 0 0 auto; min-height: 0; justify-content: center; }
body .profile-card img {
    width: 40%; min-width: 112px; max-width: 160px;
    aspect-ratio: 1 / 1; height: auto;   /* DBIM 6.1.4: 1:1 headshot */
    object-fit: cover; object-position: center top;
    margin: 0 0 var(--space-3);
}
body .profile-cards-content { padding-left: 0; text-align: center; align-items: center; }
body .profile-card h3, body .profile-name { margin: 0 0 var(--space-1); }
body .profile-card .designation { margin: 0 0 var(--space-2); }
body .profile-links a { margin: var(--space-1) 0; }
body .profiles-card, body .profiles-card1, body .profiles-cards {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
}
body .profiles-card p, body .profiles-card1 p, body .profiles-cards p { margin: 0; }
body .profile_kakehashi, body .Emergency { margin: 0 0 var(--space-2); }

/* ---------- Home: news / gallery / social boxes ---------- */
body .info-section, body .social-container { gap: var(--space-5); margin-bottom: var(--space-6); }
body .info-header { padding: var(--space-4); }
body .info-content { padding-top: 0; }
body .recordBox { padding: var(--space-3) var(--space-4); }
body .gallery-item { padding: var(--space-3) var(--space-4); margin-bottom: 0; gap: var(--space-3); }
body .info-footer { padding: var(--space-3) var(--space-4); }
body .social-tabs { padding: var(--space-4); gap: var(--space-2); }
body .tab-btn { padding: var(--space-2) var(--space-3); }
body .tab-content { padding: var(--space-4); }
/* the legacy <br> spacers between sections gave uneven gaps; spacing now comes from margins */
body div.container + br, body div.container-fluid + br, body div.container + br + br, body div.container-fluid + br + br { display: none; }

/* ---------- Home: Important Links + Contact Us (shared left edge and heading style) ---------- */
body .container-fluid:has(.important-links-section) { margin-bottom: var(--space-6); }
body .important-links-section, body .connect-section,
body #homepageTopServicesBlock.important-links-section { padding: var(--space-7) 0; text-align: left; }
body .connect-container { padding: 0; }
body .important-links-title, body .connect-title {
    display: inline-block; text-align: left;
    margin: 0 0 var(--space-6); padding-bottom: var(--space-2);
}
body .important-links-title::after, body .connect-title::after {
    left: 0; transform: none; width: 48px; bottom: 0;
}
body .important-links-grid { gap: var(--space-5); justify-items: stretch; align-items: stretch; }
body .important-link-card {
    max-width: none; width: 100%; height: 100%; min-height: 88px;
    padding: var(--space-3) var(--space-4); gap: var(--space-3); box-sizing: border-box;
}
body .important-link-icon { width: 48px; height: 48px; }           /* DBIM icon sizes 24/32/48/64 */
body .important-link-icon img { width: 32px; height: 32px; }
body .important-links-footer { margin-top: var(--space-6); text-align: center; }
body .view-all-btn { padding: var(--space-3) var(--space-5); }

body .connect-content { gap: var(--space-5); }
body .connect-left { gap: var(--space-4); }
body .connect-item { padding: var(--space-4); align-items: center; gap: var(--space-4); min-height: 88px; background: #ebeaea;}
body .connect-icon { width: 48px; height: 48px; min-width: 48px; }
body .connect-icon i { font-size: 24px; }
body .connect-info h4 { margin: 0 0 var(--space-1); }
body .connect-right { min-height: 320px; }

/* ---------- Footer ---------- */
body .footerCont { padding: var(--space-6) var(--space-4); margin-left: 0; margin-right: 0; }  /* mobile CSS gave -15px margins, so it bled past the viewport */
body .footerLinks { margin: 0 0 var(--space-3); flex-wrap: wrap; row-gap: var(--space-2); }
body .footerLinks li { float: none; }
body .footerLinksMore { margin-top: 0; }
body .footerSocial { margin: var(--space-4) 0; }
body .footerLineage { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); }
body .footerLeft br { display: none; }
body .footerCont > hr { margin: var(--space-4) 0; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 900px) {
    body .main-section { grid-template-columns: 1fr; padding: var(--space-4); }
    body .profile-section { margin-top: 0; width: 100%; height: auto; }
}
@media (max-width: 768px) {
    body .header-container { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
    body .header-container .logo { margin-right: 0; }
    body .header-container .social-icons { margin-top: 0; }
    body .search-box input { width: 180px; }
    body .info-box { max-height: none; }
    body .important-links-section, body .connect-section { padding: var(--space-6) 0; }
    body .connect-right { min-height: 280px; }
}
@media (max-width: 767px) {
    body .grid-box { min-height: 64px; padding: var(--space-2) var(--space-3); }
    body .grid-section { gap: var(--space-2); grid-auto-rows: minmax(64px, auto); }
    body .main-section > div:first-child { gap: var(--space-3); }
    body .main-section .cbps_banner { min-height: 0; height: auto !important; }
}