/*
  responsive.css
  Breakpoint overrides only. Base styles in each component file are
  already fluid; this file handles structural changes: navbar collapse,
  hero stacking, orbit scaling, and footer reflow.
*/

/* ---- Tablet and below: collapse navbar, reduce navbar height ---- */
@media (max-width: 992px) {
  .comrade-navbar__links,
  .comrade-navbar__actions .comrade-btn {
    /* Targets whichever CTA is in the desktop actions row, not tied to
       a specific color variant: this rule broke silently once before
       when the "Coming Soon" button's variant changed from primary to
       secondary and this selector didn't. The mobile menu has its own
       copy of the same button for small screens. */
    display: none;
  }

  .comrade-navbar__toggle {
    display: inline-flex;
  }

  :root {
    --comrade-navbar-height: 100px;
    --comrade-navbar-height-scrolled: 80px;
  }

  .comrade-navbar__brand {
    gap: 0.55rem;
  }

  .comrade-navbar__brand-mark {
    height: 42px;
  }

  .comrade-navbar__brand-title {
    font-size: 1.15rem;
    letter-spacing: 0.14em;
  }

  .comrade-navbar__brand-tagline {
    font-size: 0.4rem;
    letter-spacing: 0.16em;
    margin-top: 0.18rem;
  }

  /* The scrolled state's shrink comes from navbar.css's
     transform: scale(0.9), which applies proportionally on top of
     whatever base height is active here, no override needed. */

  .comrade-hero__grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .comrade-hero__content {
    max-width: none;
  }

  .comrade-hero__stage {
    max-width: 440px;
  }

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

  .comrade-footer__brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }

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

  /* The safety orbit itself scales and simplifies at phone width via
     its own component styles (safety-orbit.css); once the hero grid
     stacks, it just needs to sit centered under the text instead of
     pinned to the right of a now-gone second column. */
  .comrade-about-hero__orbit-slot {
    margin-inline: auto;
  }

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

  .comrade-products-how__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* The standard (CTO/CMO) card puts a fixed 200px image beside its
     text, so a two-up grid needs real column width for that to stay
     readable -- below this breakpoint each column would land well
     under 500px, leaving the text a sliver next to the photo. One
     full-width column at this breakpoint gives each card the whole
     container to work with, which is plenty for the image-left/
     content-right layout to stay comfortable well past phone widths
     (see the true-mobile fallback further down for where even that
     runs out of room). */
  .comrade-about-team__execs {
    grid-template-columns: 1fr;
  }
}

/* ---- Small tablet / large phone ---- */
@media (max-width: 768px) {
  .comrade-hero {
    padding-top: var(--comrade-space-lg);
    padding-bottom: var(--comrade-space-lg);
  }

  .comrade-hero__stage {
    max-width: 380px;
  }

  .hero-orbit-label__icon {
    width: 26px;
    height: 26px;
  }

  .hero-orbit-label__icon svg {
    width: 13px;
    height: 13px;
  }

  .hero-orbit-label__text {
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
  }

  .hero-orbit-label__chip[data-side="right"] {
    transform: translate(11px, -50%);
  }

  .hero-orbit-label__chip[data-side="left"] {
    transform: translate(calc(-100% - 11px), -50%);
  }

  .hero-orbit-label__chip[data-side="top"] {
    transform: translate(-50%, calc(-100% - 10px));
  }

  .hero-orbit-label__chip[data-side="bottom"] {
    transform: translate(-50%, 10px);
  }

  .comrade-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--comrade-space-lg);
  }

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

  .comrade-products-grid {
    grid-template-columns: 1fr;
  }

  /* The featured (founder) card's side-by-side photo + body layout
     needs real horizontal room to keep its message column readable,
     so it stacks to photo-above-body a full breakpoint earlier than
     the general mobile cutoff below. The standard (CTO/CMO) cards are
     already photo-on-top (see about.css) at every width, so they
     don't need this -- they stay two-up through tablet, only dropping
     to one column at the phone breakpoint further down. */
  .comrade-team-card--featured {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .comrade-team-card--featured .comrade-team-card__body {
    max-width: none;
  }

  .comrade-team-card--featured .comrade-team-card__contacts {
    justify-content: center;
  }

  .comrade-team-card--featured .comrade-team-card__visual {
    width: 240px;
  }
}

/* ---- Mobile ---- */
@media (max-width: 576px) {
  .comrade-container {
    padding-inline: var(--comrade-space-md);
  }

  .comrade-navbar__brand {
    gap: 0.45rem;
  }

  .comrade-navbar__brand-mark {
    height: 36px;
  }

  .comrade-navbar__brand-title {
    font-size: 1.02rem;
    letter-spacing: 0.12em;
  }

  .comrade-navbar__brand-tagline {
    font-size: 0.36rem;
    letter-spacing: 0.13em;
    margin-top: 0.15rem;
  }

  /* Smaller neumorphic shadow radii on mobile so the secondary/social
     tactile surfaces stay subtle rather than noisy at close viewing
     distance. Redefined once here; every element using the tokens
     (buttons.css, footer.css) picks it up automatically. */
  :root {
    --comrade-neumo-raised: 3px 3px 8px var(--comrade-neumo-shadow-dark),
      -3px -3px 8px var(--comrade-neumo-shadow-light);
    --comrade-neumo-raised-hover: 4px 4px 10px var(--comrade-neumo-shadow-dark),
      -4px -4px 10px var(--comrade-neumo-shadow-light);
    --comrade-neumo-pressed: inset 2px 2px 5px var(--comrade-neumo-shadow-dark),
      inset -2px -2px 5px var(--comrade-neumo-shadow-light);
  }

  .comrade-hero__headline {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
  }

  .comrade-hero__description {
    max-width: none;
  }

  .comrade-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .comrade-hero__actions .comrade-btn {
    justify-content: center;
  }

  .comrade-hero__stage {
    max-width: 300px;
  }

  .hero-orbit-label__icon {
    width: 22px;
    height: 22px;
  }

  .hero-orbit-label__icon svg {
    width: 11px;
    height: 11px;
  }

  .hero-orbit-label__text {
    padding: 0.26rem 0.6rem;
    font-size: 0.66rem;
  }

  /* Ultra-Minimal Mobile Footer */
  .comrade-footer {
    padding-top: var(--comrade-space-lg);
  }

  .comrade-footer__left,
  .comrade-footer__orbit-decoration,
  .comrade-footer__heading {
    display: none;
  }

  .comrade-footer__grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: var(--comrade-space-lg);
  }

  .comrade-footer__right {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0;
  }

  .comrade-footer__nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }

  .comrade-footer__nav-link {
    font-size: 0.95rem;
  }

  .comrade-footer__contact-list {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }

  .comrade-footer__contact-text {
    display: none;
  }

  .comrade-footer__contact-row {
    padding: 0.5rem; /* larger tap target */
  }

  .comrade-footer__contact-icon svg {
    width: 24px;
    height: 24px;
  }

  .comrade-footer__bottom {
    padding-block: var(--comrade-space-md);
  }

  .comrade-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }


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

  .comrade-products-how__grid {
    grid-template-columns: 1fr;
  }

  /* The standard (CTO/CMO) card's image-left/content-right layout
     (see about.css) stays comfortable all the way down to this phone
     width, where the card's own full width finally gets too narrow
     for a 200px image plus a readable text column beside it -- so
     only here does it fall back to image-top/details-below, the same
     shape the featured card already switches to above. The image
     also shrinks a little further, matching the reduced card width. */
  .comrade-team-card--standard {
    align-items: center;
    text-align: center;
  }

  .comrade-team-card--standard .comrade-team-card__contacts {
    justify-content: center;
  }

  .comrade-team-card--standard .comrade-team-card__visual {
    width: 100%;
    max-width: 260px;
  }
}

@media (max-width: 380px) {
  .comrade-navbar__brand-mark {
    height: 30px;
  }

  .comrade-navbar__brand-title {
    font-size: 0.88rem;
    letter-spacing: 0.1em;
  }

  .comrade-navbar__brand-tagline {
    font-size: 0.3rem;
    letter-spacing: 0.1em;
  }
}