/* Collection layout and interaction layer. Base branding lives in style.css. */
[hidden] { display: none !important; }

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 28px;
}
.app-filters { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: #eeefe7; }
.app-filters button { min-width: 74px; min-height: 42px; border: 0; border-radius: 999px; padding: 10px 18px; font-size: 12px; font-weight: 650; background: transparent; color: var(--muted); }
.app-filters button:hover { background: #e2e5d9; color: var(--ink); }
.app-filters button[aria-pressed="true"] { background: var(--ink); color: white; box-shadow: 0 2px 5px #28302512; }
.filter-summary { color: var(--muted); font-size: 11px; margin: 0; }
.app-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.app-collection > .app-card { min-width: 0; margin: 0; }
.app-card--featured { grid-column: 1 / -1; }
.app-brand { min-width: 0; }
.featured-label { margin-left: auto; border: 1px solid #e8d7c3; border-radius: 999px; padding: 5px 9px; color: #946545; font-size: 10px; white-space: nowrap; }
.app-card--standard .app-overview { display: block; padding: 30px; }
.app-card--standard .app-tagline { font-size: 28px; letter-spacing: -1px; margin-top: 25px; }
.app-card--standard .app-description { max-width: none; font-size: 13px; }
.app-card--standard .app-footer { padding: 22px 30px; flex-direction: column; align-items: flex-start; gap: 12px; }
.app-card--standard .app-footer nav { flex-wrap: wrap; }
.app-more { border-top: 1px solid var(--line); }
.app-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 30px; font-size: 12px; font-weight: 650; }
.app-more > summary::-webkit-details-marker { display: none; }
.app-more > summary::after { content: '+'; color: var(--muted); font-size: 22px; font-weight: 400; }
.app-more[open] > summary::after { content: '−'; }
.app-more-content > .overview-right { padding: 0 30px 22px; margin: 0; }
.app-more-content > .story-body { padding: 15px 30px 5px; }
.app-card--standard .screens-section { padding: 24px; }
.app-card--standard .gallery { gap: 18px; }
.app-card--standard .screen-item { flex-basis: calc((100% - 18px) / 2); min-width: 0; }
.app-card--standard .gallery-controls { display: flex; }
.app-empty { border: 1px dashed #d0d6c8; background: #eff1e9; text-align: center; border-radius: 18px; padding: 54px 24px; }
.app-empty h3 { font-size: 20px; letter-spacing: -.6px; margin: 0 0 13px; }
.app-empty p { font-size: 13px; color: var(--muted); margin-bottom: 23px; line-height: 1.8; }
.app-empty .button { min-height: 44px; font-size: 12px; }

#video-dialog { position: fixed; inset: 0; margin: auto; max-width: calc(100% - 28px); max-height: calc(100dvh - 28px); }
.video-status { font-size: 11px; line-height: 1.7; color: #8b492c; text-align: center; }
.video-status:empty { display: none; }
.close-dialog { flex-shrink: 0; min-width: 44px; min-height: 44px; }
.copy-toast { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); padding: 13px 22px; border-radius: 999px; background: #293c2b; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 28px #1c301f25; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 100; white-space: nowrap; }
.copy-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.copy-status { line-height: 1.7; max-width: 340px; }

@media (max-width: 760px) {
  .app-collection { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .app-card--standard .app-overview { padding: 28px; }
  .app-card--standard .screen-item { flex-basis: 44%; }
}

/* Explicit narrow-screen stacking, including cards and the contact footer. */
@media (max-width: 430px) {
  .collection-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 23px; }
  .app-filters { width: 100%; }
  .app-filters button { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; }
  .filter-summary { font-size: 10px; }
  .app-collection { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .app-collection .app-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 25px 22px; }
  .app-intro, .overview-right { min-width: 0; }
  .app-collection .overview-right { margin-top: 0; }
  .app-badges { flex-wrap: wrap; }
  .app-collection .app-buttons { flex-direction: column; align-items: stretch; }
  .app-collection .app-buttons > .button { width: 100%; min-height: 46px; }
  .app-collection .app-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 20px 22px; }
  .app-collection .app-footer nav { margin: 0; flex-wrap: wrap; white-space: normal; gap: 12px 17px; }
  .app-card--standard .app-tagline { font-size: 26px; }
  .app-more > summary { padding: 20px 22px; font-size: 11px; }
  .app-more-content > .overview-right { padding: 0 22px 18px; }
  .app-more-content > .story-body { padding: 12px 22px 3px; }
  .app-card--standard .screens-section { padding: 22px 20px; }
  .app-card--standard .screen-item { flex-basis: 76%; }
  .screens-header { align-items: flex-start; gap: 10px; }
  .gallery-controls { flex-shrink: 0; }
  .gallery-controls button { min-width: 38px; min-height: 38px; }
  .featured-label { font-size: 9px; padding: 5px 7px; }
  .contact-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .contact-actions { width: 100%; margin-top: 0; }
  .email-link { width: 100%; justify-content: space-between; gap: 12px; font-size: clamp(15px, 4.6vw, 19px); overflow-wrap: anywhere; }
  .email-link span { flex-shrink: 0; }
  .copy-email { min-height: 44px; }
  .site-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer > a:last-child { margin-left: 0; }
  .site-footer p { order: 3; margin: 0; }
  #video-dialog { padding: 12px; border-radius: 14px; }
  #video-dialog video { max-height: 65dvh; }
  .copy-toast { max-width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .copy-toast { transition: none; }
}