/*
  Phase 8L: Mobile-first foundation layer.

  Purpose:
  - Complete Phase 3 of the responsive cleanup plan.
  - Start moving the site away from desktop-first template overrides.
  - Define phone-first spacing, gutters, type scale, buttons, media, cards, and content rhythm.
  - Upgrade layouts with min-width breakpoints instead of piling on more max-width patches.

  Load order:
  - Must load after phase8k-hero-header-stabilization.css.
  - This file is intentionally conservative: it sets common responsive foundations and leaves
    legacy component-specific behavior in the earlier template/phase files until the homepage
    is converted into native Astro components.
*/

:root {
  color-scheme: light;

  /* Phone defaults. These are then upgraded with min-width breakpoints below. */
  --phase8l-gutter: clamp(16px, 5vw, 24px);
  --phase8l-content-measure: 72ch;
  --phase8l-narrow-measure: 58ch;
  --phase8l-radius: 14px;
  --phase8l-card-gap: 20px;
  --phase8l-section-y: 56px;
  --phase8l-section-y-tight: 44px;
  --phase8l-breadcrumb-y: 88px;
  --phase8l-breadcrumb-y-bottom: 72px;
  --phase8l-heading-xl: clamp(34px, 10vw, 48px);
  --phase8l-heading-lg: clamp(30px, 8vw, 42px);
  --phase8l-heading-md: clamp(24px, 6.5vw, 32px);
  --phase8l-body-size: 16px;
  --phase8l-body-line-height: 1.64;
}

@media (min-width: 576px) {
  :root {
    --phase8l-gutter: clamp(22px, 4.2vw, 32px);
    --phase8l-card-gap: 22px;
    --phase8l-section-y: 64px;
    --phase8l-section-y-tight: 52px;
    --phase8l-breadcrumb-y: 104px;
    --phase8l-breadcrumb-y-bottom: 88px;
  }
}

@media (min-width: 768px) {
  :root {
    --phase8l-gutter: clamp(24px, 3vw, 36px);
    --phase8l-card-gap: 24px;
    --phase8l-section-y: 78px;
    --phase8l-section-y-tight: 64px;
    --phase8l-breadcrumb-y: 128px;
    --phase8l-breadcrumb-y-bottom: 118px;
    --phase8l-heading-xl: clamp(44px, 6.2vw, 64px);
    --phase8l-heading-lg: clamp(36px, 5vw, 54px);
    --phase8l-heading-md: clamp(28px, 3.8vw, 40px);
  }
}

@media (min-width: 1200px) {
  :root {
    --phase8l-gutter: 32px;
    --phase8l-card-gap: 30px;
    --phase8l-section-y: 112px;
    --phase8l-section-y-tight: 88px;
    --phase8l-breadcrumb-y: 160px;
    --phase8l-breadcrumb-y-bottom: 150px;
    --phase8l-heading-xl: clamp(58px, 4.7vw, 82px);
    --phase8l-heading-lg: clamp(46px, 3.8vw, 64px);
    --phase8l-heading-md: clamp(32px, 2.7vw, 46px);
  }
}

/* --------------------------------------------------------------------------
   Baseline safeguards
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--phase8k-header-height-phone, 70px);
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: var(--phase8k-header-height-tablet, 78px);
  }
}

@media (min-width: 1200px) {
  html {
    scroll-padding-top: var(--phase8k-header-height-desktop, 92px);
  }
}

body {
  font-size: var(--phase8l-body-size);
  line-height: var(--phase8l-body-line-height);
}

:where(img, picture, video, canvas, svg) {
  max-width: 100%;
}

:where(img, picture, video, canvas) {
  height: auto;
}

:where(table) {
  width: 100%;
}

:where(th, td) {
  overflow-wrap: anywhere;
}

:where(a, button, input, select, textarea) {
  -webkit-tap-highlight-color: rgba(255, 204, 1, 0.25);
}

:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid #ffcc01;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Containers and page rhythm
   -------------------------------------------------------------------------- */

.large-container,
.large-container-1,
.small-container,
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-left: var(--phase8l-gutter);
  padding-right: var(--phase8l-gutter);
}

.small-container,
.large-container,
.large-container-1 {
  width: min(100%, calc(100vw - (var(--phase8l-gutter) * 2)));
}

@media (min-width: 1200px) {
  .small-container,
  .large-container,
  .large-container-1 {
    width: 100%;
  }
}

.section-space,
.section-space-medium,
.section-space-bottom-2,
.Project-details-page.section-space,
.contact-page-section.section-space,
.phase8d-articles-index.section-space,
.footer-top.section-space-medium {
  padding-top: var(--phase8l-section-y) !important;
  padding-bottom: var(--phase8l-section-y) !important;
}

.features-section.pt-80 {
  padding-top: var(--phase8l-section-y-tight) !important;
}

.features-section.pb-80 {
  padding-bottom: var(--phase8l-section-y-tight) !important;
}

/* Mobile default: remove large desktop-only side padding on stacked content. */
.about-2-content-area.pl-50,
.footer-widget-2.pl-50,
.footer-widget-4.pr-30,
.project-details-page-content.ml-40,
.project-details-page-content.mr-40 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 992px) {
  .about-2-content-area.pl-50 {
    padding-left: 40px !important;
  }
}

@media (min-width: 1200px) {
  .about-2-content-area.pl-50 {
    padding-left: 50px !important;
  }

  .footer-widget-2.pl-50 {
    padding-left: 50px !important;
  }

  .footer-widget-4.pr-30 {
    padding-right: 30px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile-first type scale
   -------------------------------------------------------------------------- */

h1,
.breadcrumb__title {
  font-size: var(--phase8l-heading-xl);
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

h2,
.section-title,
.title,
.project-details-page-content h2 {
  font-size: var(--phase8l-heading-lg);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3,
.project-details-page-title,
.project-details-page-content h3 {
  font-size: var(--phase8l-heading-md);
  line-height: 1.18;
  text-wrap: balance;
}

.project-details-page-content :where(h2, h3, h4, h5, h6),
.phase3-content-page .project-details-page-content :where(h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--phase8k-header-height-phone, 70px) + 24px);
}

@media (min-width: 768px) {
  .project-details-page-content :where(h2, h3, h4, h5, h6),
  .phase3-content-page .project-details-page-content :where(h2, h3, h4, h5, h6) {
    scroll-margin-top: calc(var(--phase8k-header-height-tablet, 78px) + 28px);
  }
}

@media (min-width: 1200px) {
  .project-details-page-content :where(h2, h3, h4, h5, h6),
  .phase3-content-page .project-details-page-content :where(h2, h3, h4, h5, h6) {
    scroll-margin-top: calc(var(--phase8k-header-height-desktop, 92px) + 32px);
  }
}

.project-details-page-content,
.phase3-content-page .project-details-page-content {
  max-width: var(--phase8l-content-measure);
}

.project-details-page-content :where(p, li),
.phase3-content-page .project-details-page-content :where(p, li) {
  max-width: var(--phase8l-content-measure);
  line-height: var(--phase8l-body-line-height);
}

.project-details-page-content :where(ul, ol),
.phase3-content-page .project-details-page-content :where(ul, ol) {
  padding-left: 1.25rem;
}

@media (min-width: 768px) {
  .project-details-page-content :where(ul, ol),
  .phase3-content-page .project-details-page-content :where(ul, ol) {
    padding-left: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Buttons and tap targets
   -------------------------------------------------------------------------- */

.primary-btn-1,
.primary-btn-5,
.sidebar-toggle-button,
.offcanvas__close button,
.hamburger-btn {
  min-width: 44px;
  min-height: 44px;
}

.primary-btn-1,
.primary-btn-5 {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.about-2-btn-area,
.banner-btn-area-2,
.footer-subscribe,
.contact-button-area,
.team-btn-area,
.project-btn-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.about-2-btn-area .primary-btn-1,
.banner-btn-area-2 .primary-btn-1,
.footer-subscribe .primary-btn-1,
.contact-button-area .primary-btn-1 {
  width: 100%;
}

@media (min-width: 576px) {
  .about-2-btn-area,
  .banner-btn-area-2,
  .footer-subscribe,
  .contact-button-area,
  .team-btn-area,
  .project-btn-area {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .about-2-btn-area .primary-btn-1,
  .banner-btn-area-2 .primary-btn-1,
  .footer-subscribe .primary-btn-1,
  .contact-button-area .primary-btn-1 {
    width: auto;
  }
}

/* Keep phone CTA groups readable without forcing desktop buttons to stretch. */
@media (max-width: 575.98px) {
  .about-2-btn-area,
  .banner-btn-area-2,
  .footer-subscribe,
  .contact-button-area {
    max-width: 340px;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumbs and page heroes
   -------------------------------------------------------------------------- */

.breadcrumb__area.pt-160,
.breadcrumb__area.pt-95 {
  padding-top: var(--phase8l-breadcrumb-y) !important;
}

.breadcrumb__area.pb-160,
.breadcrumb__area.pb-95 {
  padding-bottom: var(--phase8l-breadcrumb-y-bottom) !important;
}

.breadcrumb__wrapper {
  max-width: min(100%, 880px);
}

.breadcrumb__menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.breadcrumb__thumb,
.breadcrumb__thumb_2 {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cards, grids, and media blocks
   -------------------------------------------------------------------------- */

.row.g-4 {
  --bs-gutter-x: var(--phase8l-card-gap);
  --bs-gutter-y: var(--phase8l-card-gap);
}

.features-box-area,
.service-tab-content-box,
.team-box-area,
.project-box-area,
.blog-box-area,
.phase3-related-card,
.contact-info-box,
.sidebar-widget,
.content-provenance {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.features-box-area,
.service-tab-content-box,
.team-box-area,
.project-box-area,
.blog-box-area,
.phase3-related-card,
.contact-info-box {
  height: 100%;
}

.features-box-area p,
.service-tab-content-box p,
.blog-box-area p,
.phase3-related-card span {
  line-height: 1.58;
}

.phase3-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--phase8l-card-gap);
}

@media (min-width: 640px) {
  .phase3-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .phase3-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-2-image-area,
.project-details-page-image,
.blog-details-image,
.team-details-image {
  margin-bottom: 28px;
}

@media (min-width: 992px) {
  .about-2-image-area,
  .project-details-page-image,
  .blog-details-image,
  .team-details-image {
    margin-bottom: 0;
  }
}

.about-2-image-area .small-image,
.about-2-image-area .icon-box,
.about-2-image-area .shape-1 {
  max-width: 45vw;
}

@media (min-width: 768px) {
  .about-2-image-area .small-image,
  .about-2-image-area .icon-box,
  .about-2-image-area .shape-1 {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Footer/mobile stacking
   -------------------------------------------------------------------------- */

.footer-title {
  line-height: 1.2;
}

.footer-blog-post-box {
  align-items: flex-start;
}

.footer-blog-post-box .thumb {
  flex: 0 0 auto;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   Motion and rendering preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}