/* ============================================
   MOBILE.CSS — Seventh Studios Creative
   All styles in this file apply at max-width: 767px
   (below the md breakpoint where desktop layout kicks in).

   Loaded after styles.css so these always win on small screens.
   ============================================ */

@media (max-width: 767px) {

  /* ============================================
     GLOBAL
     ============================================ */

  :root {
    --nav-height: 52px;
    --space-section: 3.5rem;
  }

  .container {
    padding: 0 var(--space-lg);
  }

  .section {
    padding: var(--space-section) 0;
  }

  /* ============================================
     NAVIGATION
     ============================================ */

  .nav__links  { display: none; }
  .nav__cta    { display: none; }
  .nav__hamburger { display: flex; }

  /* Always show nav bg on mobile — no transparent phase */
  .nav {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .nav__inner {
    padding: 0 var(--space-lg);
  }

  /* Mobile nav fullscreen overlay — large tap-friendly links */
  .nav__mobile {
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-xl);
    justify-content: center;
  }

  .nav__mobile-link {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  /* ============================================
     HALIDE HERO
     ============================================ */

  /*
    On mobile the full 3D perspective tilt looks broken.
    We flatten the canvas to a simple 2D photo/video fill
    and keep the interface overlay intact.
  */

  .halide-hero {
    min-height: 100dvh;
  }

  /* Flatten the viewport — no 3D perspective on mobile */
  .halide-viewport {
    perspective: none;
  }

  /* Canvas fills the full screen, no 3D rotation */
  .halide-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    /* Override the JS entrance/parallax transforms */
    transform: none !important;
    transition: none !important;
  }

  /* Layers fill the canvas */
  .halide-layer {
    position: absolute;
    inset: 0;
  }

  .halide-layer-1 {
    background-position: center 30%;
    background-size: cover;
  }

  /* Video inside layer fills the screen */
  .halide-layer-1 video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Layers also flat — no individual Z shifts */
  .halide-layer,
  .halide-contours {
    transform: none !important;
    transition: none !important;
  }

  /* Heavier overlay so text reads on any video frame */
  .halide-hero .halide-interface ~ .halide-grain {
    opacity: 0.1;
  }

  /* Interface: single column, full-width */
  .halide-interface {
    padding: var(--space-lg);
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
  }

  /* Hide coordinates on mobile — not enough space */
  .halide-interface__coords {
    display: none;
  }

  .halide-interface__brand {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  /* Big headline — fill the width */
  .halide-title {
    font-size: clamp(4.5rem, 22vw, 7rem);
    line-height: 0.86;
    align-self: flex-end;
    margin-bottom: var(--space-lg);
  }

  /* Footer row stacks vertically */
  .halide-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .halide-footer-row__meta {
    font-size: 0.6rem;
  }

  /* CTA button — full width on mobile */
  .halide-cta {
    width: 100%;
    text-align: center;
    clip-path: none; /* remove clipped corner — too subtle at small size */
    padding: 1rem;
  }

  /* Scroll line centered */
  .halide-scroll {
    display: none; /* not visible enough on mobile */
  }

  /* ============================================
     EDITORIAL SERVICE BLOCKS
     ============================================ */

  .editorial-block {
    grid-template-columns: 1fr;
    min-height: unset;
    border-top: 1px solid var(--border) !important;
  }

  /* Always show image on top on mobile regardless of --alt class */
  .editorial-block--alt .editorial-block__visual,
  .editorial-block--alt .editorial-block__content {
    order: unset;
  }

  .editorial-block__visual {
    min-height: 260px;
    width: 100%;
  }

  .editorial-block__visual img,
  .editorial-block__visual video {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
  }

  .editorial-block__content {
    padding: var(--space-2xl) var(--space-lg);
    background: var(--bg-primary);
  }

  .editorial-block__title {
    font-size: clamp(2.5rem, 14vw, 4rem);
    margin-bottom: var(--space-lg);
  }

  .editorial-block__body {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xl);
  }

  .editorial-block__number {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-sm);
  }

  /* ============================================
     SHOWREEL
     ============================================ */

  .showreel__inner {
    aspect-ratio: 4 / 3; /* taller on mobile for better visibility */
  }

  .showreel__caption {
    display: none;
  }

  /* ============================================
     PORTFOLIO PREVIEW (homepage)
     ============================================ */

  /* Single column on mobile — no tall item */
  .portfolio-preview {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .portfolio-item--tall {
    aspect-ratio: 4 / 3; /* reset tall items on mobile */
  }

  /* ============================================
     ABOUT SPLIT
     ============================================ */

  .about-split {
    grid-template-columns: 1fr;
  }

  .about-split__visual {
    min-height: 300px;
    width: 100%;
  }

  .about-split__visual img {
    min-height: 300px;
  }

  .about-split__content {
    padding: var(--space-2xl) var(--space-lg);
  }

  .about-split__title {
    font-size: clamp(3rem, 18vw, 5rem);
    margin-bottom: var(--space-lg);
  }

  /* ============================================
     STATS BAR
     ============================================ */

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reset borders for 2-col layout */
  .stat {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-lg) var(--space-md);
  }

  .stat:nth-child(2),
  .stat:nth-child(4) {
    border-right: none;
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-bottom: none;
  }

  .stat__number {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* ============================================
     TESTIMONIAL
     ============================================ */

  .testimonial {
    padding: var(--space-3xl) 0;
  }

  .testimonial__mark {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .testimonial__quote {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  /* ============================================
     CTA SECTION
     ============================================ */

  .cta-section {
    padding: var(--space-3xl) 0;
  }

  .cta-section__title {
    font-size: clamp(3.5rem, 18vw, 6rem);
  }

  .cta-section__body {
    font-size: var(--font-size-sm);
  }

  /* ============================================
     PORTFOLIO PAGE GRID
     ============================================ */

  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-item--span2 {
    grid-column: span 1;
  }

  /* Filter buttons scroll horizontally */
  .portfolio-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    gap: var(--space-sm);
    /* Hide scrollbar visually */
    scrollbar-width: none;
  }

  .portfolio-filter::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
  }

  /* ============================================
     PAGE HEADERS (inner pages)
     ============================================ */

  .page-header {
    padding-top: calc(var(--nav-height) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
  }

  .page-header__inner {
    padding: 0 var(--space-lg);
  }

  .page-header h1 {
    font-size: clamp(2.5rem, 14vw, 4.5rem);
  }

  /* ============================================
     SERVICES PAGE
     ============================================ */

  .service-section {
    padding: var(--space-2xl) 0;
  }

  .service-detail {
    grid-template-columns: 1fr;
  }

  /* Always show visual on top */
  .service-detail > div[style*="order: 1"],
  .service-detail > div[style*="order: 2"] {
    order: unset !important;
  }

  .service-text h2 {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .service-text__intro {
    font-size: var(--font-size-md);
  }

  .service-includes__item {
    font-size: var(--font-size-sm);
  }

  /* ============================================
     ABOUT PAGE
     ============================================ */

  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-item {
    padding: var(--space-xl) 0;
  }

  .value-item__title {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }

  /* ============================================
     CONTACT PAGE
     ============================================ */

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .contact-info__title {
    font-size: clamp(2rem, 12vw, 3.5rem);
  }

  .form-row {
    grid-template-columns: 1fr; /* stack name fields on mobile */
  }

  /* ============================================
     FOOTER
     ============================================ */

  .footer {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Collapse navigate + services into a 2-col row */
  .footer__grid > div:nth-child(2),
  .footer__grid > div:nth-child(3) {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }

  .footer__social {
    gap: var(--space-lg);
  }

  /* ============================================
     BUTTONS
     ============================================ */

  /* Slightly larger touch targets */
  .btn {
    min-height: 48px;
    padding: 14px var(--space-xl);
  }

}

/* ============================================
   EXTRA SMALL — phones under 380px
   ============================================ */

@media (max-width: 380px) {

  .halide-title {
    font-size: clamp(3.8rem, 22vw, 5rem);
  }

  .editorial-block__title {
    font-size: clamp(2.2rem, 14vw, 3rem);
  }

  .about-split__title {
    font-size: clamp(2.5rem, 18vw, 4rem);
  }

  .cta-section__title {
    font-size: clamp(3rem, 18vw, 4.5rem);
  }

  .container,
  .nav__inner,
  .page-header__inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

}