/* ============================================================
   PHUKET360 — assets/css/activites.css
   Page /activites/. Mobile-first : le desktop ne reprend la main qu'a
   partir de 768px.

   DEPENDANCE - cette feuille ne contient que les specificites de la page
   Activites (chapeau, badge, prix, bouton Reserver, lien etire). Elle
   suppose hub.css PUIS hebergements-liste.css chargees avant elle, dans
   cet ordre (cf $extra_css dans templates/activites.php) : la grille,
   les cartes, les puces de filtre et l'etat vide viennent de la et ne
   sont jamais redefinis ici. Retirer l'une des deux casse la page.
   ============================================================ */

/* Chapeau editorial sous le H1 */
.activites-chapeau {
  margin: 0 0 20px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}

/* La carte est un <article> et non un <a> : elle contient le bouton
   Reserver, et un lien dans un lien n'est pas du HTML valide. Le lien du
   titre s'etire sur toute la carte via ::after, le bouton repasse au-dessus
   grace a son z-index. */
.activite-card {
  position: relative;
}
.activite-card-lien {
  color: inherit;
  text-decoration: none;
}
.activite-card-lien::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.activite-card-lien:hover {
  text-decoration: underline;
}

/* Badge photo : reprend .hub-card-badge, passe en inline-flex pour aligner
   l'icone Lucide avec le libelle. */
.activite-badge-reservable {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--emeraude);
}
.activite-badge-reservable svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.activite-card-prix {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ocean-deep);
}

/* Bouton de reservation : seul aplat de la carte, meme couleur que le bouton
   Reserver du panneau de la carte interactive. margin-top:auto pour que les
   boutons s'alignent en bas quand les cartes d'une meme rangee ont des
   textes de longueurs differentes. */
.activite-card-reserver {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--emeraude);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.activite-card-reserver svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.activite-card-reserver:hover {
  background: color-mix(in srgb, var(--emeraude) 85%, #000);
  color: #fff;
  text-decoration: none;
}

@media (min-width: 768px) {
  .activites-chapeau {
    margin-bottom: 24px;
    font-size: 1rem;
  }
}