/* ============================================================
   COVALENT BOND — MOBILE STYLESHEET
   Included on all public pages after base.css
   Breakpoints:
     960px — tablet / small laptop collapse
     768px — mobile (phone landscape + portrait)
     480px — small phone
   ============================================================ */

/* ── 1. GLOBAL OVERFLOW LOCK ─────────────────────────────── */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Images never exceed their container */
img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* ── 2. FOOTER CONTACT ICONS ─────────────────────────────── */
/* Base CSS for classes only defined in contact.html;
   must live here so they work on every page's footer. */
.footer-contact-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  fill: var(--gold-d);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 11px;
  font-weight: 300;
  color: var(--tm);
  line-height: 1.6;
}

.footer-contact-item a {
  color: var(--td);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact-item a:hover {
  color: var(--gold);
}

/* Contact info block list items */
.cib ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cib ul li > svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0;
  margin-top: 3px;
}

/* ── 3. IMAGE PLACEHOLDER — HIDE DEV META ────────────────── */
.img-ph-dims,
.img-ph-path,
.ph-dims,
.ph-path,
.about-img-ph .ph-dims,
.about-img-ph .ph-path {
  display: none !important;
}

/* ── 4. ABOUT PAGE PLACEHOLDER BOXES ────────────────────── */
/* Show a clean dark luxury rectangle, not the file path box */
.about-img-ph {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--b2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.about-img-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 14px,
    rgba(196, 163, 90, 0.025) 14px, rgba(196, 163, 90, 0.025) 15px
  );
}

.about-img-ph svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gold-d);
  stroke-width: 1.2;
  opacity: 0.4;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.about-img-ph .ph-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--td);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  max-width: 220px;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* ── 5. TABLET (≤ 960px) ─────────────────────────────────── */
@media (max-width: 960px) {

  /* Section padding */
  .section,
  .section-sm,
  .page-hero {
    padding: 60px 24px !important;
    overflow-x: hidden;
  }

  /* Prevent any section child from overflowing */
  .section > *,
  .section-sm > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── Named grids — about.html ── */
  .about-who-grid,
  .founder-text-grid,
  .markets-split-grid,
  .services-feat-grid,
  .investor-split-grid,
  .offices-grid,
  .vision-grid-3,
  .investor-type-grid,
  .proj-grid-3,
  .proj-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .founder-stat-mini,
  .market-stats-grid,
  .investor-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Named grids — index.html new sections ── */
  .infra-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }

  .reporting-grid,
  .platform-preview-grid,
  .governance-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  #advisory-compact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Named grids — services.html ── */
  .svc-full {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .lifecycle-flow {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Named grids — invest.html ── */
  .reason-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Named grids — hasan-profile.html ── */
  .why-work-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-cta-row a {
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Named grids — contact.html ── */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Named grids — investment-form.html ── */
  .form-grid,
  .form-radio-group {
    grid-template-columns: 1fr !important;
  }

  /* ── Track grid (stats 4-up) ── */
  .track-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── CTA bars ── */
  .page-cta-bar,
  .cta-section {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 48px 24px !important;
    gap: 24px !important;
  }

  .cta-section-btns,
  .page-cta-btns {
    flex-direction: column !important;
    width: 100% !important;
  }

  .cta-section-btns .btn,
  .page-cta-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Projects page — hero ── */
  #metropol-cube > div[style*="height:480px"],
  div[style*="height:480px"] {
    height: 360px !important;
  }

  div[style*="height:480px"] div[style*="padding:60px 80px"],
  div[style*="height:480px"] > div > div[style*="padding"] {
    padding: 40px 24px !important;
  }

  /* ── Projects page — card grids ── */
  /* Targets the 1fr 1fr card layout (image + text side by side) */
  .proj-card-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Inline grid: project card (1fr 1fr gap:64px) */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:64px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Inline grid: invest.html Batumi spotlight (1fr 1fr gap:60px) */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Stats sub-grids inside project cards */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA bottom bar on projects page */
  div[style*="padding:80px"][style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    padding: 48px 24px !important;
    align-items: flex-start !important;
  }

  /* Services page CTA bar */
  .page-cta-bar[style*="padding:80px"] {
    padding: 48px 24px !important;
  }

  /* About page hero */
  .about-hero-content {
    padding: 0 24px 48px !important;
  }

  .about-hero {
    min-height: 44vh !important;
  }

  /* WhatsApp float — smaller on mobile */
  .wa-float {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .wa-float svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Prevent btn overflow */
  .btn {
    white-space: normal;
    word-break: break-word;
  }

  /* Inline flex button rows → wrap */
  div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] {
    flex-wrap: wrap !important;
  }

  /* Generic 2-col or 3-col inline grids (catch-all) */
  div[style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1fr 1.5fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1fr 2.5fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline padding resets */
  div[style*="padding:100px 80px"] {
    padding: 60px 24px !important;
  }

  div[style*="padding:90px 80px"] {
    padding: 60px 24px !important;
  }

  div[style*="padding:80px"] {
    padding: 48px 24px !important;
  }

  div[style*="padding:70px 80px"] {
    padding: 48px 24px !important;
  }

  /* Reveal blocks shouldn't clip */
  .reveal {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ── 6. SMALL PHONE (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {

  /* infra-grid goes 1-col on small phones */
  .infra-grid {
    grid-template-columns: 1fr !important;
  }

  /* Track / stat rows go 1-col */
  .track-grid,
  .stat-row,
  .lifecycle-flow {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Form radio stays 1-col */
  .form-grid,
  .form-radio-group {
    grid-template-columns: 1fr !important;
  }

  /* Hero text on projects */
  div[style*="height:480px"] {
    height: 280px !important;
  }

  /* Section padding tighter */
  .section,
  .section-sm,
  .page-hero {
    padding: 48px 20px !important;
  }

  /* About hero */
  .about-hero {
    min-height: auto !important;
  }

  /* Repeat catch-all at 480 for any missed cases */
  div[style*="grid-template-columns:1fr 1fr;"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. PAGE-SPECIFIC NAMED CLASS ADDITIONS ──────────────── */

/* Projects page — card grids added via Python */
@media (max-width: 960px) {
  .proj-card-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .proj-stats-grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  .proj-stats-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* invest.html — Batumi spotlight */
  .batumi-split-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .batumi-stat-mini {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .proj-stats-grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  .batumi-stat-mini {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 8. PREMIUM MOBILE PASS — 390px / 430px ─────────────── */

/* Projects grid: 2-col on tablet portrait, 1-col on phone */
@media (max-width: 960px) {
  .projects-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Trust bar — 2×2 on phones */
@media (max-width: 600px) {
  .trust-bar-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .trust-bar-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--b1);
  }
}

/* Hero inner — tighter padding on very small screens */
@media (max-width: 430px) {
  .hero-inner {
    padding: 0 24px !important;
  }

  /* Hero buttons stack vertically */
  .hero-btns-wrap {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .hero-btns-wrap .btn {
    width: 100% !important;
    justify-content: center !important;
    max-width: 280px !important;
  }

  /* Eyebrow dividers hide on tiny screens */
  .hero-inner > div > span[style*="width:48px"] {
    display: none !important;
  }
}

/* Card metric grids — 3-col stays on mobile (it's compact enough) */
/* But if the card is full-width, give metrics more room */
@media (max-width: 430px) {
  .projects-grid .card > div > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

/* Footer contact items — tighten on small phones */
@media (max-width: 430px) {
  .footer-contact-item {
    font-size: 10.5px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding: 20px 20px !important;
  }

  .footer-copy {
    font-size: 8.5px !important;
    letter-spacing: 1.5px !important;
    line-height: 1.7 !important;
  }
}

/* Section headers on very small screens */
@media (max-width: 390px) {
  .section-title {
    font-size: clamp(20px, 6vw, 32px) !important;
    letter-spacing: 1px !important;
  }

  .section-label {
    font-size: 7px !important;
    letter-spacing: 4px !important;
  }
}