/* Responsive refinements, ordered from compact screens to wide displays */

@media (max-width: 47.99rem) {
  :root {
    --header-height: 4.25rem;
  }

  .header-inner,
  .site-header__inner {
    position: relative;
    gap: var(--space-2);
  }

  .brand-tagline,
  .site-brand__tagline {
    display: none;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-brand,
  .footer-grid > nav {
    min-inline-size: 0;
  }

  .footer-brand .brand {
    inline-size: min(100%, 13rem);
    min-inline-size: 0;
  }

  .brand-lockup-about {
    justify-self: start;
  }

  .site-brand,
  .brand {
    margin-inline-end: auto;
  }

  .js .nav-toggle {
    display: inline-grid;
  }

  .site-nav,
  .nav,
  [data-nav-menu] {
    inline-size: 100%;
  }

  .js .site-nav,
  .js .nav,
  .js [data-nav-menu] {
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-start: calc(100% + var(--space-2));
    inset-inline: 0;
    inline-size: 100%;
    max-block-size: calc(100vh - var(--header-height) - (2 * var(--space-4)));
    padding: var(--space-3);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem) scale(0.985);
    transform-origin: top center;
    visibility: hidden;
    transition:
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-base) var(--ease-emphasis),
      visibility 0s linear var(--duration-base);
  }

  .js .site-nav.is-open,
  .js .nav.is-open,
  .js [data-nav-menu].is-open,
  .js [data-nav-menu][data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .nav-list,
  .site-nav__list {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-1);
  }

  .nav-link,
  .site-nav__link {
    inline-size: 100%;
    min-block-size: var(--tap-size);
    padding-inline: var(--space-4);
  }

  .site-nav .search-form,
  .nav .search-form,
  [data-nav-menu] .search-form {
    margin-block-start: var(--space-3);
  }

  .section-header,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-3);
  }

  .app-card--compact {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-card--compact .app-card__footer,
  .app-card--compact .app-card-footer {
    grid-column: 1 / -1;
  }

  .featured-app,
  .featured-panel,
  .corporate-block,
  .brand-story {
    border-radius: var(--radius-xl);
  }

  .featured-media-concept {
    min-block-size: 0;
    aspect-ratio: 9 / 7;
  }

  .catalog-toolbar,
  .results-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-sort {
    justify-content: space-between;
  }

  .catalog-sort select {
    max-inline-size: 12rem;
  }

  .app-actions .button,
  .app-actions .btn,
  .app-hero__actions .button,
  .app-hero__actions .btn {
    flex: 1 1 12rem;
  }

  .gallery-dialog__nav {
    inset-block-start: auto;
    inset-block-end: 0;
    transform: none;
  }

  .gallery-dialog__nav--prev,
  [data-gallery-prev] {
    inset-inline-start: calc(50% - 3.25rem);
  }

  .gallery-dialog__nav--next,
  [data-gallery-next] {
    inset-inline-end: calc(50% - 3.25rem);
  }

  .gallery-dialog__caption,
  [data-gallery-caption] {
    padding-block-end: 3.3rem;
  }
}

@media (max-width: 29.99rem) {
  :root {
    --gutter: 1rem;
  }

  .category-grid,
  .platform-grid,
  .link-card-grid,
  .metadata-grid,
  .meta-grid,
  .technical-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-title,
  .home-hero__title {
    font-size: clamp(2.35rem, 13vw, 3.15rem);
  }

  .hero-actions,
  .home-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button,
  .hero-actions .btn,
  .home-hero__actions .button,
  .home-hero__actions .btn {
    inline-size: 100%;
  }

  .hero-visual,
  .home-hero__visual {
    min-block-size: 17rem;
  }

  .footer-nav,
  .footer-links {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .footer-bottom,
  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-card__footer,
  .app-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .app-card__footer .button,
  .app-card__footer .btn,
  .app-card-footer .button,
  .app-card-footer .btn {
    inline-size: 100%;
  }
}

@media (max-width: 22.49rem) {
  .brand-copy,
  .site-brand__copy {
    display: none;
  }

  .header-actions,
  .site-header__actions {
    margin-inline-start: auto;
  }

  .app-card {
    padding: var(--space-4);
  }

  .app-icon,
  .app-card__icon,
  .app-card-icon {
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }
}

@media (min-width: 30rem) {
  .category-grid,
  .platform-grid,
  .link-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 36rem) {
  .app-grid,
  .apps-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-showcase,
  .hero-device-stack {
    aspect-ratio: 1 / 0.82;
  }

  .app-hero__identity,
  .app-detail-hero__identity {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app-hero__icon,
  .app-detail-icon {
    align-self: start;
  }
}

@media (min-width: 48rem) {
  :root {
    --header-height: 4.75rem;
  }

  .nav-toggle {
    display: none !important;
  }

  .hero-grid,
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.76fr);
  }

  .hero-visual,
  .home-hero__visual {
    min-block-size: 28rem;
  }

  .featured-app__grid,
  .featured-panel__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1.05fr);
  }

  .featured-app__media,
  .featured-panel__media {
    min-block-size: 31rem;
  }

  .corporate-block,
  .brand-story {
    grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.65fr);
  }

  .footer-main,
  .site-footer__main {
    grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.4fr);
  }

  .footer-links,
  .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-values,
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery,
  .screenshot-gallery,
  [data-gallery] {
    grid-auto-columns: minmax(13rem, 33%);
    margin-inline: 0;
    padding-inline: var(--space-1);
  }

  .steps,
  .install-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .catalog-layout,
  .catalog-shell {
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .catalog-filters,
  .filter-panel {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }

  .app-hero__grid,
  .app-detail-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.72fr);
  }

  .app-detail-layout,
  .app-content__layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }

  .app-sidebar,
  .app-detail-aside {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }

  .legal-layout,
  .content-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
  }

  .legal-nav,
  .content-nav {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }

  .about-layout,
  .corporate-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (min-width: 72rem) {
  .apps-grid,
  .featured-grid,
  .app-grid:not(.catalog-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-grid,
  .platform-grid,
  .link-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-values,
  .value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metadata-grid,
  .meta-grid,
  .technical-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  :root {
    --gutter: 2.5rem;
  }

  .hero-grid,
  .home-hero__grid {
    gap: 7rem;
  }

  .catalog-layout,
  .catalog-shell {
    grid-template-columns: 18.5rem minmax(0, 1fr);
  }
}

@media (hover: none) {
  .app-card:hover,
  .category-card:hover,
  .platform-card:hover,
  .link-card:hover {
    transform: none;
  }

  .gallery-item::after,
  .screenshot::after,
  [data-gallery-item]::after {
    opacity: 0.9;
    transform: scale(1);
  }
}

@media (max-height: 32rem) and (orientation: landscape) {
  .gallery-dialog {
    padding: var(--space-2);
  }

  .gallery-dialog__image,
  [data-gallery-image] {
    max-block-size: calc(100vh - 4.5rem);
  }

  .gallery-dialog__caption,
  [data-gallery-caption] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-card:hover,
  .category-card:hover,
  .platform-card:hover,
  .link-card:hover,
  .gallery-item:hover img,
  .screenshot:hover img,
  [data-gallery-item]:hover img {
    transform: none;
  }
}

/* Responsive integration for the concrete PHP templates */
@media (max-width: 74.99rem) {
  .header-search {
    display: none;
  }
}

@media (max-width: 47.99rem) {
  .primary-nav {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: 0;
  }

  .primary-nav a {
    inline-size: 100%;
    min-block-size: var(--tap-size);
    padding-inline: var(--space-4);
  }

  :root:not(.js) .header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-2);
  }

  :root:not(.js) .primary-nav {
    position: static;
    order: 4;
    flex-basis: 100%;
  }

  .visual-panel {
    transform: rotate(1.5deg);
  }

  .recent-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
  }

  .recent-item time {
    display: none;
  }

  .platform-panel,
  .corporate-panel,
  .contact-panel {
    border-radius: var(--radius-xl);
  }

  .app-detail-heading > .app-detail-main {
    align-items: flex-start;
  }

  .app-action-panel {
    padding: var(--space-4);
  }

  .gallery-dialog-toolbar {
    padding-inline: var(--space-1);
  }

  .gallery-dialog-stage {
    block-size: calc(100vh - 5.5rem);
  }

  .gallery-dialog-stage [data-gallery-image] {
    max-block-size: calc(100vh - 10rem);
  }

  .gallery-dialog-stage .gallery-nav {
    inset-block-start: auto;
    inset-block-end: var(--space-1);
    transform: none;
  }

  .gallery-dialog-stage .gallery-prev {
    inset-inline-start: calc(50% - 3.25rem);
  }

  .gallery-dialog-stage .gallery-next {
    inset-inline-end: calc(50% - 3.25rem);
  }

  .legal-copy {
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 35.99rem) {
  .app-detail-heading > .app-detail-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-icon-xl {
    inline-size: 6.5rem;
    block-size: 6.5rem;
  }

  .app-detail-copy h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .platform-links,
  .platform-links-wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .metadata-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .metadata-card dd {
    text-align: start;
  }

  .search-control input,
  .input-with-icon input {
    padding-inline-end: 5.75rem !important;
  }
}

@media (max-width: 29.99rem) {
  .visual-app:nth-child(n + 3) {
    display: none;
  }

  .visual-panel {
    padding: var(--space-3);
    border-radius: var(--radius-xl);
  }

  .featured-identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .recent-item .app-icon {
    inline-size: 3.25rem;
    block-size: 3.25rem;
  }

  .corporate-panel .button,
  .contact-panel .button,
  .error-panel .button {
    inline-size: 100%;
  }

  .error-panel .button-row {
    inline-size: 100%;
    align-items: stretch;
    flex-direction: column;
  }
}

@media (min-width: 36rem) {
  .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-list:not(.steps-list-large) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .featured-app {
    grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1.05fr);
  }

  .featured-media {
    min-block-size: 31rem;
  }

  .platform-panel {
    grid-template-columns: minmax(0, 0.75fr) minmax(20rem, 1.25fr);
  }

  .corporate-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .footer-grid {
    grid-template-columns: minmax(15rem, 1.2fr) repeat(2, minmax(10rem, 0.65fr));
  }

  .contact-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  }

  .steps-list-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .app-detail-heading {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }

  .app-metadata {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }

  .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .guide-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .guide-aside,
  .legal-status {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-5));
  }
}

@media (min-width: 72rem) {
  .platform-links-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .app-detail-layout,
  .app-content__layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

@media (max-width: 47.99rem) {
  .phone-preview-heading {
    text-align: center;
  }

  .phone-preview-heading > div,
  .phone-preview-heading > p {
    inline-size: 100%;
  }

  .phone-preview-heading .eyebrow {
    justify-content: center;
  }

  .featured-media-app-preview {
    min-block-size: 27rem;
  }
}

@media (max-width: 35.99rem) {
  .phone-carousel-stage {
    grid-template-columns: 2.75rem minmax(0, 17rem) 2.75rem;
    gap: 0.45rem;
  }

  .phone-carousel-nav {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .phone-device {
    padding: 0.58rem;
    border-width: 0.32rem;
    border-radius: 2.5rem;
  }

  .phone-device__speaker {
    inset-block-start: 0.45rem;
  }

  .phone-device__screen,
  .phone-slide[data-gallery-item] {
    border-radius: 1.92rem;
  }

  .phone-carousel-status {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .featured-media-app-preview {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    justify-items: center;
    text-align: center;
  }

  .featured-preview-copy {
    justify-items: center;
  }

  .featured-preview-copy strong {
    max-inline-size: 18rem;
  }

  .featured-preview-phone {
    inline-size: min(100%, 11rem);
  }

  .technical-card .metadata-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .technical-card .metadata-item-wide {
    grid-column: auto;
  }
}