/* =========================================================
   CLINICARE — Cartões de acesso rápido (Urgência, Consultas, Diagnóstico, Seguradoras)
   Lista compacta em ecrãs pequenos (até 768px). Carregar DEPOIS de home.css.
   Em computador o aspeto não muda.
   ========================================================= */

/* Cartão da Urgência: contentor com ligação "esticada" (para poder ter o botão Ligar dentro) */
.quick-service--urgent { position: relative; cursor: pointer; }
.quick-service--urgent .quick-service-link::after { content: ""; position: absolute; inset: 0; }
.quick-service--urgent:focus-within { outline: 2px solid #0067c7; outline-offset: -2px; }
.quick-service-call { display: none; }                 /* o botão Ligar só aparece em ecrãs pequenos */

@media (max-width: 768px) {

  .quick-service {
    position: relative; display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 30px; column-gap: .95rem; row-gap: 0; align-items: center;
    min-height: 0; padding: 1rem 1rem 1rem 1.1rem;
    border: 0; border-bottom: 1px solid #e6e9ed;
    -webkit-tap-highlight-color: rgba(0,103,199,.12);
  }
  .quick-service-content { display: contents; }         /* título, texto e seta passam a ser células da grelha do cartão */

  /* ícone num quadrado arredondado, à esquerda */
  .quick-service-icon {
    grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0;
    display: grid; place-items: center; border-radius: 14px; background: #eaf3fc; font-size: 1.3rem;
  }
  .quick-service h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 .2rem; font-size: 1.05rem; line-height: 1.25; }
  .quick-service p  { grid-column: 2; grid-row: 2; align-self: start; max-width: none; margin: 0; font-size: .9rem; line-height: 1.45; }

  /* "SAIBA MAIS" deixa de aparecer: fica só a seta, num círculo, à direita */
  .quick-service-link {
    grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0;
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
    background: #eef4fb; font-size: 0;
  }
  .quick-service-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* escondido só visualmente: leitores de ecrã continuam a lê-lo */
  .quick-service-link i { font-size: .8rem; }

  /* resposta ao toque (o :hover não existe num telemóvel) */
  .quick-service:active { background: #eef5fc; }
  @media (hover: none) { .quick-service:hover { background: #fff; } }

  /* ---- Urgência: destacada, com botão para ligar ---- */
  .quick-service--urgent { background: #fff7f6; box-shadow: inset 4px 0 0 #d93025; }
  .quick-service--urgent:active { background: #ffefed; }
  @media (hover: none) { .quick-service--urgent:hover { background: #fff7f6; } }
  .quick-service--urgent .quick-service-icon,
  .quick-service--urgent .quick-service-link { background: #fde7e4; color: #d93025; }
  .quick-service-call {
    position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 3;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    height: 46px; margin-top: .9rem; border-radius: 10px;
    background: #d93025; color: #fff; text-decoration: none; font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  }
  .quick-service-call:active { background: #b3261e; }
  .quick-service-call-number { padding-left: .65rem; border-left: 1px solid rgba(255,255,255,.5); font-weight: 700; }
  .quick-service-call > span:first-of-type { font-weight: 600; }
  .quick-service-call i { font-size: .95rem; }
}

@media (max-width: 360px) {
  .quick-service { grid-template-columns: 46px minmax(0, 1fr) 28px; column-gap: .8rem; padding-left: 1rem; }
  .quick-service-icon { width: 46px; height: 46px; font-size: 1.15rem; }
  .quick-service h3 { font-size: 1rem; }
  .quick-service p { font-size: .86rem; }
}