/* ============================================================================
   Phones, after the 15 October 2026 phone audit
   ----------------------------------------------------------------------------
   Oscar asked for smartcareliving.ie to get what fourwindsdigital.com got on
   14 October: a measured audit at phone width and the cuts it called for.
   Measured on the redesign at 390 that day, the 73 pages in the sitemap
   averaged 11,837px against about 8,100 at 1440, and the extra length came
   from a few repeated shapes rather than from the writing:

   - the Family Advice Centre's eight hub cards, each with a 160px coloured
     panel holding one small icon: 5,850px against 2,770 on a laptop;
   - every guide's twelve-line contents list above the first paragraph, and
     its sources list at the foot (24,709px on the falls guide);
   - rows of cards stacked one above the next: the two stories and three
     guides on the homepage, "Works well with" on every service page, and
     "Continue reading" under 53 pages.

   Loaded last on every public page, so it decides. Nothing here applies
   above 640px. The fold-outs (contents, sources, the sensor's specification
   tiles) are made by js/phone.js, which adds a button and a class; without
   the script everything stays open, as it was.

   Left alone on purpose, at Nigel's request through the redesign chat: the
   sensor clip at the top of SmartGuardian, the fall slider on the homepage
   and the CES badge.
   ========================================================================= */

@media (max-width: 640px) {

  /* ---- Rows of cards: side by side, swiped ------------------------------- */
  /* One card and the edge of the next, so it is plain there is more. The
     cards keep their own look; only the row changes. */
  .svc-related,
  .home-guides,
  .related-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    margin-inline: -20px !important;
    padding: 4px 20px 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .svc-related::-webkit-scrollbar,
  .home-guides::-webkit-scrollbar,
  .related-grid::-webkit-scrollbar { display: none; }
  .svc-related > *,
  .home-guides > *,
  .related-grid > * {
    flex: 0 0 82% !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  /* ---- The Family Advice Centre's hub cards: one row each --------------- */
  /* The coloured panel becomes a 56px tile beside the title, as an app list
     row is drawn. The hub's one-line description stays; it is what tells a
     family which hub is theirs. */
  .blog-grid { gap: 12px !important; }
  .blog-grid .blog-card {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    align-items: start;
    gap: 14px;
    padding: 16px !important;
    text-align: left;
  }
  .blog-grid .blog-card .blog-card-image {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .blog-grid .blog-card .blog-card-image svg { width: 28px; height: 28px; }
  .blog-grid .blog-card .blog-card-content {
    padding: 0 !important;
    text-align: left !important;
  }
  .blog-grid .blog-card .blog-card-content h2 { font-size: 1.05rem !important; margin: 2px 0 4px !important; }
  .blog-grid .blog-card .blog-card-content p { font-size: 0.92rem !important; line-height: 1.5 !important; margin: 0 !important; }
  .blog-grid .blog-card .blog-card-content .read-more {
    padding: 11px 0 0 !important;
    min-height: 44px;
  }

  /* ---- Fold-outs made by js/phone.js ------------------------------------ */
  .ph-closed { display: none !important; }
  .ph-fold-btn {
    display: flex !important;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 10px;
    padding: 12px 16px;
    border: 1px solid var(--line, #e7e2d9);
    border-radius: 14px;
    background: #fff;
    color: var(--ink, #18272a);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .ph-fold-btn::after {
    content: '';
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    margin-right: 4px;
    border-right: 2px solid var(--orange-text, #ad5310);
    border-bottom: 2px solid var(--orange-text, #ad5310);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .ph-fold-btn[aria-expanded='true']::after { transform: translateY(2px) rotate(225deg); }
  .ph-fold-btn:focus-visible { outline: 3px solid var(--teal, #056d70); outline-offset: 2px; }
}

/* Above a phone the fold buttons do not exist and nothing is closed. */
@media (min-width: 641px) {
  .ph-fold-btn { display: none !important; }
}