/* ==========================================================================
   Arshan – Contact sections (15 styles)
   Load after style.css, placeholders.css, about.css and ui.css (uses the
   .ab section shell and .form-x / .info-list / .map-x / .dept from ui.css).
   Forms use form[data-contact] (front-end validation in main.js); connect
   them to your mail service or form handler before going live.
   ========================================================================== */

.ct-kicker { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.ct-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ct-split--img { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
.ct-split .ab__lead { margin-bottom: 4px; }
.ab .form-x { margin-top: 2px; }
.ab .info-list { margin-top: 16px; gap: 14px; }
.info-list .ibox__icon { width: 34px; height: 34px; flex-shrink: 0; }
.info-list .ibox__icon .icon { width: 16px; height: 16px; margin: 0; color: currentColor; }
.ab--dark .info-list li { color: rgba(255,255,255,.7); }
.ab--dark .info-list strong { color: #fff; }
.ab--dark .info-list a { color: rgba(255,255,255,.85); }
.ab--dark .info-list .ibox__icon { background: var(--primary); color: #fff; }
.ab--dark .form-x input, .ab--dark .form-x textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.ab--dark .form-x input::placeholder, .ab--dark .form-x textarea::placeholder { color: rgba(255,255,255,.5); }
.ab--dark .form-msg { color: #7ee2b8; }
.ab--dark .form-msg.is-error { color: #ff9aa8; }
/* dark panel within split */
.ct-darkpanel { padding: 22px; border-radius: 14px; background: radial-gradient(240px 160px at 90% 0%, rgba(91,76,240,.4), transparent 70%), #0d1130; color: rgba(255,255,255,.7); }
.ct-darkpanel .ab__title { color: #fff; }
.ct-darkpanel .ab__lead { color: rgba(255,255,255,.7); }
.ct-darkpanel .info-list li { color: rgba(255,255,255,.7); }
.ct-darkpanel .info-list strong { color: #fff; }
.ct-darkpanel .info-list a { color: rgba(255,255,255,.85); }
.ct-darkpanel .info-list .ibox__icon { background: var(--primary); color: #fff; }
/* info cards */
.ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; list-style: none; padding: 0; }
.ct-cards a, .ct-cards div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; text-align: center; font-size: 11.5px; color: var(--muted); }
.ct-cards a:hover { border-color: var(--primary-100); }
.ct-cards strong { font-size: 12.5px; color: var(--ink); }
.ct-cards .ibox__icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px; }
.ct-cards .ibox__icon .icon { width: 16px; height: 16px; }
/* inline info row (minimal) */
.ct-inline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); list-style: none; }
.ct-inline li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.ct-inline strong { display: block; font-size: 12px; color: var(--ink); }
.ct-inline .icon { width: 16px; height: 16px; color: var(--primary); }
/* departments with chevron */
.dept-grid { margin-top: 18px; }
.dept > .icon { width: 13px; height: 13px; margin-left: auto; color: var(--muted); }
/* hours */
.ct-hours { display: grid; gap: 14px; margin-top: 16px; list-style: none; padding: 0; }
.ct-hours li { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.ct-hours strong { display: block; font-size: 13px; color: var(--ink); }
.ct-hours .ibox__icon { width: 34px; height: 34px; }
.ct-hours .ibox__icon .icon { width: 16px; height: 16px; }
.ct-hours .closed .ibox__icon { --bg: #ffeef1; --c: #e5394f; }
/* testimonial slider card */
.ct-quote { position: relative; margin-top: 16px; padding: 16px 34px; border: 1px solid var(--line); border-radius: 12px; }
.ct-quote .tm-nav { position: absolute; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); box-shadow: none; }
.ct-quote .tm-nav:first-child { left: 4px; }
.ct-quote .tm-nav.next { right: 4px; }
.ct-quote__slides { display: grid; }
.ct-quote figure { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.ct-quote figure.is-active { opacity: 1; visibility: visible; }
.ct-quote blockquote { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ct-quote .tm-person { margin-top: 10px; }
/* map */
.map-wrap { position: relative; height: 100%; min-height: 260px; border-radius: 12px; overflow: hidden; }
.map-wrap .map-x { position: absolute; inset: 0; border-radius: 0; transform: scale(var(--z, 1)); transition: transform .3s; }
.map-wrap .map-card { z-index: 2; }
.map-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: grid; border-radius: 8px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.map-zoom button { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom button:hover { background: var(--primary-50); color: var(--primary); }
.map-zoom .icon { width: 15px; height: 15px; }
/* image background */
.ab--ct-photo { --ab-fg: rgba(255,255,255,.8); --ab-head: #fff; text-align: center; }
.ab--ct-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,30,.7), rgba(10,12,30,.88)); }
.ab--ct-photo > :not([class^="ph-"]) { position: relative; z-index: 2; }
.ab--ct-photo .ab__title, .ab--ct-photo .ab__lead { margin-inline: auto; }
.ab--ct-photo .form-x { max-width: 440px; margin: 18px auto 0; text-align: left; }
.ab--ct-photo .form-msg { color: #7ee2b8; }
.ab--ct-photo .form-msg.is-error { color: #ff9aa8; }
/* socials */
.ct-social { display: flex; justify-content: center; gap: 10px; margin: 16px 0; list-style: none; padding: 0; }
.ct-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); color: var(--c); transition: transform .2s; }
.ct-social a:hover { transform: translateY(-3px); }
.ct-social .icon { width: 17px; height: 17px; }
/* offices */
.ct-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; list-style: none; padding: 0; text-align: left; }
.ct-offices .gl-img { display: block; aspect-ratio: .95; }
.ct-offices strong { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--ink); }
.ct-offices strong .icon { width: 13px; height: 13px; color: var(--primary); }
.ct-offices address { font-style: normal; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
/* decorative */
.ct-deco { position: relative; }
.ct-deco::before { content: ""; position: absolute; right: -10px; top: -10px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #ece8ff, transparent 70%); }
.ct-deco .plane { position: absolute; right: 6px; top: 0; width: 44px; height: 44px; color: var(--primary); transform: rotate(-8deg); }
.ct-deco > :not(.plane) { position: relative; }

@container ab (max-width: 480px) {
  .ct-split, .ct-split--img { grid-template-columns: 1fr; }
  .ct-split--img .ab__media, .ct-split--img > .gl-img { min-height: 200px; }
  .ct-offices, .ct-cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .dept-grid { grid-template-columns: 1fr; }
}