/*
 * pages/ma-commune.css -- Page hub Ma Commune
 * Commune de Silly -- Theme custom
 *
 * Structure fidele au template Routena (services.html), adaptee aux couleurs Silly.
 * Convention BEM stricte. Mobile-first.
 *
 * @package Silly
 */

/* ============================================
   PAGE HERO (internal pages -- dark centered)
   ============================================ */
.page-hero {
  background: var(--color-bg-dark);
  padding: calc(var(--total-header-height, 120px) + 60px) 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero__inner {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 79.2px;
  letter-spacing: -2.16px;
  color: var(--color-text-light);
}

.page-hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: rgba(255, 255, 255, 0.64);
  max-width: 520px;
  text-align: center;
}

/* ============================================
   HUB INTRO SECTION
   ============================================ */
.hub-intro {
  padding: var(--section-padding, 112px) 0;
  background: var(--color-bg);
}

.hub-intro__inner {
  display: flex;
  gap: 48px;
  align-items: stretch;
}

.hub-intro__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hub-intro__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.hub-intro__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
}

.hub-intro__actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.hub-intro__media {
  flex: 1;
  max-width: 520px;
}

.hub-intro__image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* ============================================
   HUB SERVICES GRID
   ============================================ */
.hub-services {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.hub-services__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hub-services__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.hub-services__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.44px;
  color: var(--color-text);
}

.hub-services__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.72px;
  color: var(--color-text-secondary);
}

.hub-services__grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ============================================
   FLAT ALPHABETICAL GRID (all services)
   ============================================ */
.hub-services__flat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ============================================
   SEARCH / FILTER BAR
   ============================================ */
.hub-services__search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
}

.hub-services__search-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.hub-services__search-label:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 109, 148, 0.18);
}

.hub-services__search-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.hub-services__search-input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  outline: none;
  appearance: none;
}

.hub-services__search-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.8;
}

/* Masquer le bouton clear natif Webkit (remplacé par notre bouton) */
.hub-services__search-input::-webkit-search-cancel-button,
.hub-services__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.hub-services__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.hub-services__search-clear:hover,
.hub-services__search-clear:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-light);
  outline: none;
}

.hub-services__search-clear svg {
  width: 16px;
  height: 16px;
}

.hub-services__search-clear[hidden] {
  display: none;
}

.hub-services__search-status {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  min-height: 1.4em;
  margin: 0;
  padding-left: 4px;
}

/* Etat : service qui ne correspond pas au filtre */
.service-card[hidden] {
  display: none !important;
}

/* Message "aucun service" */
.hub-services__empty {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
  padding: 32px 0;
  text-align: center;
  margin: 0;
}

.hub-services__empty[hidden] {
  display: none;
}

/* ============================================
   SERVICE CARD COMPONENT
   ============================================ */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.service-card__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--service-color, var(--color-primary));
}

.service-card__icon,
.service-card__logo-img {
  height: 80px;
  flex-shrink: 0;
}

.service-card__icon {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.service-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--service-color, var(--color-primary));
}

.service-card__logo-img {
  width: auto;
  object-fit: contain;
  object-position: left;
}

/* Logo dont le graphisme remplit tout le viewBox (ex: Cittaslow) : on réduit
   la hauteur pour égaliser la taille visuelle avec les logos qui ont une marge
   interne (Culture, Mobilité, Environnement...). */
.service-card__logo-img--compact {
  height: 64px;
}

.service-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.service-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 23.4px;
  letter-spacing: -0.54px;
  color: var(--color-text);
}

.service-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.42px;
  color: var(--color-text-secondary);
}

.service-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  align-self: flex-end;
  transition: background var(--transition-base);
}

.service-card:hover .service-card__arrow {
  background: var(--service-color, var(--color-primary));
}

.service-card__arrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text-secondary);
  transition: stroke var(--transition-base);
}

.service-card:hover .service-card__arrow svg {
  stroke: var(--color-text-light);
}

/* ============================================
   HUB CTA SECTION
   ============================================ */
.hub-cta {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.hub-cta__card {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  gap: 48px;
  align-items: center;
}

.hub-cta__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hub-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 41.6px;
  letter-spacing: -0.96px;
  color: var(--color-text);
}

.hub-cta__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.64px;
  color: var(--color-text-secondary);
}

.hub-cta__actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.hub-cta__image {
  flex: 1;
  max-width: 400px;
}

.hub-cta__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* ============================================
   CTA BANNER (shared -- may already be in components)
   ============================================ */
.cta-banner {
  background: var(--color-primary);
}

.cta-banner__inner {
  padding: 64px var(--container-padding, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cta-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.44px;
  color: var(--color-text-light);
  max-width: 480px;
}

/* ============================================
   RESPONSIVE -- TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .page-hero__title {
    font-size: 48px;
    line-height: 52px;
  }

  .hub-intro__inner {
    flex-direction: column;
  }

  .hub-intro__media {
    max-width: 100%;
  }

  .hub-intro__title,
  .hub-services__title {
    font-size: 36px;
    line-height: 40px;
  }

  .hub-services__flat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hub-cta__card {
    flex-direction: column;
  }

  .hub-cta__image {
    max-width: 100%;
  }

  .cta-banner__inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .cta-banner__title {
    font-size: 36px;
    line-height: 40px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE LARGE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .page-hero {
    padding: calc(var(--total-header-height, 80px) + 40px) 0 48px;
  }

  .page-hero__title {
    font-size: 36px;
    line-height: 40px;
  }

  .hub-intro {
    padding: 64px 0;
  }

  .hub-intro__title,
  .hub-services__title {
    font-size: 28px;
    line-height: 32px;
  }

  .hub-intro__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-services {
    padding-bottom: 64px;
  }

  .hub-services__flat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .service-card {
    padding: 20px;
  }

  .hub-cta__card {
    padding: 32px;
  }

  .hub-cta__title {
    font-size: 24px;
    line-height: 31.2px;
  }

  .hub-cta__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hub-cta {
    padding-bottom: 64px;
  }

  .cta-banner__title {
    font-size: 28px;
    line-height: 32px;
  }
}

/* ============================================
   RESPONSIVE -- MOBILE SMALL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .hub-services__flat-grid {
    grid-template-columns: 1fr;
  }
}