/* =====================================================================
   Amitava Sen - professional design layer
   Shared by Index (Layout1) and inner pages (_Layout).
   All new components use the "as-" prefix so they never collide with
   the theme's own classes.
   ===================================================================== */
:root {
    --as-ink: #10265f;      /* deep navy  - headings, dark bands      */
    --as-blue: #183a94;     /* brand blue - links, header bar         */
    --as-gold: #d9a21b;     /* accent     - frames, rules, highlights */
    --as-gold-soft: #fbf1d6;
    --as-paper: #f5f7fb;    /* cool section background                */
    --as-text: #3b4760;     /* body copy                              */
    --as-muted: #6b7690;
    --as-line: #dde3ee;
    --as-serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --as-sans: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
}

/* ---------- section scaffolding ---------- */
.as-section { padding: 80px 0; font-family: var(--as-sans); color: var(--as-text); }
.as-section.as-paper { background: var(--as-paper); }
.as-section p { font-size: 17px; line-height: 1.7; }
.as-head { max-width: 680px; margin: 0 0 40px; }
.as-head h2 {
    font-family: var(--as-serif); font-weight: 600; color: var(--as-ink);
    font-size: 38px; line-height: 1.2; margin: 0 0 12px; text-transform: none; letter-spacing: 0;
}
.as-head h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--as-gold); margin-top: 14px; }
.as-head p { margin: 0; color: var(--as-muted); }
.as-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.as-head-row .as-head { margin-bottom: 0; }

/* ---------- buttons ---------- */
.as-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--as-sans); font-weight: 600; font-size: 16px; line-height: 1;
    padding: 15px 26px; border-radius: 4px; border: 2px solid var(--as-blue);
    background: var(--as-blue); color: #fff !important; text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s;
}
.as-btn:hover { background: var(--as-ink); border-color: var(--as-ink); }
.as-btn-outline { background: transparent; color: var(--as-blue) !important; }
.as-btn-outline:hover { background: var(--as-blue); color: #fff !important; }
.as-btn-gold { background: var(--as-gold); border-color: var(--as-gold); color: var(--as-ink) !important; }
.as-btn-gold:hover { background: #fff; border-color: #fff; }
.as-btn-light { background: transparent; border-color: rgba(255,255,255,.6); }
.as-btn-light:hover { background: #fff; color: var(--as-ink) !important; border-color: #fff; }
.as-btn:focus-visible, .as-tile:focus-visible, .as-service:focus-visible, .as-video:focus-visible { outline: 3px solid var(--as-gold); outline-offset: 3px; }

/* ---------- news ticker ---------- */
.as-ticker { background: var(--as-ink); color: #fff; font-family: var(--as-sans); }
.as-ticker .as-ticker-inner { display: flex; align-items: center; min-height: 50px; }
.as-ticker .as-ticker-label {
    flex: 0 0 auto; background: var(--as-gold); color: var(--as-ink);
    font-weight: 700; font-size: 15px; padding: 6px 14px; border-radius: 3px; margin-right: 16px;
}
.as-ticker marquee { flex: 1 1 auto; }
.as-ticker marquee a { color: #fff !important; font-size: 15px; line-height: 50px; }
.as-ticker marquee a:hover { color: var(--as-gold) !important; }
.as-ticker .as-sep { color: var(--as-gold); margin: 0 1em; }

/* ---------- about: the advisor's note ---------- */
.as-about { background: #fff; }
.as-about .as-about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.as-portrait { position: relative; margin: 0 24px 24px 0; }
.as-portrait::before {
    content: ""; position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px;
    border: 3px solid var(--as-gold); border-radius: 4px; z-index: 0;
}
.as-portrait img { position: relative; z-index: 1; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; border-radius: 4px; display: block; }
.as-about blockquote {
    font-family: var(--as-serif); font-weight: 500; font-size: 34px; line-height: 1.3; color: var(--as-ink);
    border: 0; padding: 0; margin: 0 0 26px; quotes: none;
}
.as-about .as-signoff { margin: 26px 0 30px; padding-top: 18px; border-top: 1px solid var(--as-line); }
.as-about .as-signoff strong { display: block; font-family: var(--as-serif); font-size: 24px; color: var(--as-ink); font-weight: 600; }
.as-about .as-signoff span { color: var(--as-muted); font-size: 16px; }
.as-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- services ---------- */
.as-services { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--as-line); border-left: 1px solid var(--as-line); background: #fff; }
.as-service {
    display: flex; gap: 20px; align-items: flex-start; padding: 32px 28px;
    border-right: 1px solid var(--as-line); border-bottom: 1px solid var(--as-line);
    color: var(--as-text) !important; text-decoration: none !important; transition: background .2s;
}
.as-service:hover { background: var(--as-gold-soft); }
.as-service img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; }
.as-service h3 { font-family: var(--as-serif); font-size: 23px; font-weight: 600; color: var(--as-ink); margin: 2px 0 8px; text-transform: none; }
.as-service p { font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 12px; }
.as-service .as-more { font-weight: 600; color: var(--as-blue); font-size: 15px; }
.as-service:hover .as-more { text-decoration: underline; }

/* ---------- video cards (Index + Videos page) ---------- */
.as-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.as-video { display: block; background: #fff; border: 1px solid var(--as-line); border-radius: 6px; overflow: hidden; color: var(--as-text) !important; text-decoration: none !important; cursor: pointer; text-align: left; padding: 0; width: 100%; font: inherit; }
.as-video .as-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--as-ink); overflow: hidden; }
.as-video .as-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.as-video .as-play {
    position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
    border-radius: 50%; background: rgba(16,38,95,.85); border: 2px solid var(--as-gold);
    display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.as-video .as-play::after { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 5px; }
.as-video:hover .as-thumb img { transform: scale(1.04); }
.as-video:hover .as-play { background: var(--as-gold); }
.as-video:hover .as-play::after { border-left-color: var(--as-ink); }
.as-video .as-video-body { padding: 18px 20px 20px; }
.as-video h3 { font-family: var(--as-serif); font-size: 20px; font-weight: 600; color: var(--as-ink); margin: 0 0 6px; text-transform: none; line-height: 1.3; }
.as-video p { font-size: 15px !important; line-height: 1.55 !important; margin: 0; color: var(--as-muted); }

/* ---------- gallery tiles (Index + Gallery page) ---------- */
.as-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.as-tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--as-paper); cursor: zoom-in; }
.as-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.as-tile .as-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
    background: linear-gradient(to top, rgba(16,38,95,.88), rgba(16,38,95,0));
    color: #fff; font-family: var(--as-sans); font-size: 15px; font-weight: 600; line-height: 1.35;
    opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.as-tile:hover img, .as-tile:focus-visible img { transform: scale(1.05); }
.as-tile:hover .as-cap, .as-tile:focus-visible .as-cap { opacity: 1; transform: none; }
.as-empty { padding: 40px; text-align: center; border: 1px dashed var(--as-line); border-radius: 6px; color: var(--as-muted); background: #fff; }

/* ---------- testimonials ---------- */
.as-quotes .owl-stage { display: flex; }
.as-quotes .owl-item { display: flex; }
.as-quote { background: #fff; border: 1px solid var(--as-line); border-top: 3px solid var(--as-gold); border-radius: 6px; padding: 32px 30px; margin: 4px; width: 100%; display: flex; flex-direction: column; }
.as-quote blockquote { font-family: var(--as-serif); font-size: 19px; line-height: 1.6; color: var(--as-ink); border: 0; padding: 0; margin: 0 0 24px; flex: 1 1 auto; }
.as-quote blockquote::before { content: "\201C"; display: block; font-size: 56px; line-height: .8; color: var(--as-gold); }
.as-quote .as-who { display: flex; align-items: center; gap: 14px; }
.as-quote .as-who img { width: 56px !important; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--as-gold-soft); }
.as-quote .as-who strong { font-family: var(--as-sans); font-size: 17px; color: var(--as-ink); }
.as-quotes .owl-nav button, .as-quotes .owl-dots { margin-top: 18px; }

/* ---------- call-to-action band ---------- */
.as-cta { background: var(--as-ink); color: #fff; padding: 70px 0; font-family: var(--as-sans); }
.as-cta .as-cta-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
.as-cta h2 { font-family: var(--as-serif); color: #fff; font-size: 36px; font-weight: 600; line-height: 1.25; margin: 0 0 14px; text-transform: none; }
.as-cta p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.7; margin: 0; }
.as-cta .as-cta-contact { border-left: 3px solid var(--as-gold); padding-left: 28px; }
.as-cta .as-cta-contact a.as-phone { display: block; font-family: var(--as-serif); font-size: 34px; color: #fff !important; text-decoration: none !important; margin-bottom: 4px; }
.as-cta .as-cta-contact a.as-mail { color: var(--as-gold) !important; font-size: 17px; }
.as-cta .as-actions { margin-top: 22px; }

/* ---------- lightbox / video player (shared) ---------- */
.as-lb { position: fixed; inset: 0; z-index: 100000; background: rgba(8,18,46,.92); display: none; align-items: center; justify-content: center; padding: 60px 70px; }
.as-lb.is-open { display: flex; }
.as-lb-stage { width: 100%; text-align: center; }
.as-lb-stage img { max-width: 100%; max-height: 78vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.as-lb-stage .as-lb-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.as-lb-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.as-lb-caption { color: #fff; font-family: var(--as-sans); font-size: 16px; margin-top: 14px; }
.as-lb button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 48px; cursor: pointer; }
.as-lb button:hover { background: var(--as-gold); color: var(--as-ink); }
.as-lb .as-lb-close { top: 16px; right: 16px; }
.as-lb .as-lb-prev { left: 12px; top: 50%; margin-top: -24px; }
.as-lb .as-lb-next { right: 12px; top: 50%; margin-top: -24px; }
body.as-lb-lock { overflow: hidden; }

/* ---------- inner page banner (site-wide) ---------- */
section.page-title { background: linear-gradient(120deg, var(--as-ink) 0%, var(--as-blue) 100%) !important; padding: 70px 0 !important; }
section.page-title h1.title { color: #fff !important; font-family: var(--as-serif); font-weight: 600; text-transform: none; }
section.page-title h1.title::after { content: ""; display: block; width: 56px; height: 3px; background: var(--as-gold); margin: 14px auto 0; }
section.page-title canvas#confetti { opacity: .35; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) { .as-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
    .as-section { padding: 60px 0; }
    .as-about .as-about-grid, .as-cta .as-cta-grid { grid-template-columns: 1fr; gap: 40px; }
    .as-portrait { max-width: 420px; margin: 0 auto 24px; }
    .as-services { grid-template-columns: repeat(2, 1fr); }
    .as-video-grid { grid-template-columns: repeat(2, 1fr); }
    .as-gallery { grid-template-columns: repeat(2, 1fr); }
    .as-cta .as-cta-contact { border-left: 0; border-top: 3px solid var(--as-gold); padding: 24px 0 0; }
}
@media (max-width: 575px) {
    .as-head h2, .as-cta h2 { font-size: 30px; }
    .as-about blockquote { font-size: 27px; }
    .as-services, .as-video-grid { grid-template-columns: 1fr; }
    .as-gallery { gap: 10px; }
    .as-tile .as-cap { opacity: 1; transform: none; font-size: 13px; }
    .as-lb { padding: 60px 10px; }
    .as-ticker .as-ticker-label { font-size: 13px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .as-tile img, .as-video .as-thumb img, .as-tile .as-cap { transition: none !important; }
}
.as-lb-body { width: 100%; max-width: 1100px; }
@media (max-width: 575px) {
    .as-portrait { margin: 0 14px 14px 0; }
    .as-portrait::before { top: 14px; left: 14px; right: -14px; bottom: -14px; }
}

/* ---------- compact Language button (header) ---------- */
a.as-lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 15px; padding: 6px 14px;
    background: #2575fc; color: #fff !important; border-radius: 20px;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    cursor: pointer; text-decoration: none !important; white-space: nowrap;
    transition: background .2s;
}
a.as-lang-btn i { font-size: 15px; }
a.as-lang-btn:hover { background: #fff; color: #183a94 !important; }
a.as-lang-btn:focus-visible { outline: 3px solid #d9a21b; outline-offset: 2px; }

/* Header Language button - shrink the theme button even if the markup still
   uses "btn btn-theme btn-circle" (works with either version of Layout1). */
a.btn.btn-theme.btn-circle[onclick*="scroll_down"] {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 6px 14px !important; min-width: 0 !important; height: auto !important;
    font-size: 14px !important; font-weight: 600; line-height: 1.2 !important;
    border-radius: 20px !important; box-shadow: none !important;
    margin-left: 10px !important; vertical-align: middle;
}
a.btn.btn-theme.btn-circle[onclick*="scroll_down"] i { font-size: 15px !important; margin-right: 0 !important; }

/* ---------- gallery: robust sizing + mobile layout ---------- */
.as-tile img { position: absolute; top: 0; left: 0; font-size: 0; color: transparent; }   /* hide alt text if an image fails */
.as-tile { background: var(--as-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23b8c2d6' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 17l-5-5-9 7'/%3E%3C/svg%3E") center / 40px no-repeat; }
@supports not (aspect-ratio: 4 / 3) {
    .as-tile { height: 0; padding-top: 75%; }
}

@media (max-width: 767px) {
    .as-head-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
    .as-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 575px) {
    /* card style: square photo with the caption underneath, always readable */
    .as-tile { aspect-ratio: auto; height: auto; padding-top: 0; display: flex; flex-direction: column;
               background-color: #fff; border: 1px solid var(--as-line); border-radius: 8px; cursor: pointer; }
    .as-tile::before { content: ""; display: block; padding-top: 100%; }          /* square photo area */
    .as-tile img { height: auto; aspect-ratio: 1 / 1; width: 100%; border-radius: 8px 8px 0 0; }
    .as-tile .as-cap {
        position: static; opacity: 1; transform: none; background: none;
        color: var(--as-ink); font-size: 13px; font-weight: 600; line-height: 1.35;
        padding: 8px 10px 10px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .as-tile:empty .as-cap, .as-tile .as-cap:empty { display: none; }
    .as-tile:hover img, .as-tile:focus-visible img { transform: none; }
    .as-head-row .as-btn { width: 100%; justify-content: center; }
    .as-lb .as-lb-prev, .as-lb .as-lb-next { top: auto; bottom: 16px; margin-top: 0; }
}
@media (max-width: 359px) {
    .as-gallery { grid-template-columns: 1fr; }
}