/*
 * Ads pages: list (.page-annonces, Services/ads_list.html.twig), ad (.page-annonce, Services/ad.html.twig),
 * my ads (.page-my-annonces) and the ad form (.page-annonce-form, Management/*).
 * Page adjustments only, on top of the design system components (DESIGN_SYSTEM.md).
 */

/* List: results heading (count, post button) */
.page-annonces .annonces-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.page-annonces .annonces-results__count { margin: 0; color: var(--a-ink-2); font-family: var(--a-font-body); font-size: var(--a-fs-field); font-weight: 600; line-height: var(--a-lh); }
.page-annonces .annonces-results__count b { color: var(--a-ink); font-weight: 800; }
.page-annonces .annonces-filters__neighborhoods legend .a-muted { font-weight: 600; }
.page-annonces #pagination .pagination { margin: 0; }

/*
 * List below 992px (T17): the post button no longer comes between the summary and the results. The heading is
 * flattened into the results column (display: contents), then: summary, results, pages, post button, doors.
 */
@media (max-width: 991.98px) {
    .page-annonces .annonces-results__head { display: contents; }
    .page-annonces .annonces-results__publish { order: 1; width: 100%; }
    .page-annonces .annonces-results > .annonces-doors,
    .page-annonces .annonces-results > .a-callout { order: 2; }
}

/* Ad: breadcrumb back link with its chevron */
.page-annonce .a-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; }

/* Ad: management callout (author or admin), its actions side by side */
.page-annonce .annonce-manage__actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 12px; }
.page-annonce .annonce-manage__actions form { display: contents; }
@media (max-width: 767.98px) {
    .page-annonce .annonce-manage__actions { width: 100%; }
    .page-annonce .annonce-manage__actions .btn { flex: 1 1 0; }
}

/* Ad: contact card (phone / email loaded on click by js/contact.js, or the association's as a relay) */
.page-annonce .annonce-contact__title { margin: 0; font-size: var(--a-fs-small); font-weight: 800; }
.page-annonce .annonce-contact__item { position: relative; display: flex; flex-direction: column; gap: 8px; }
.page-annonce .annonce-contact__item > .btn { width: 100%; }
.page-annonce .annonce-contact__item .btn { overflow: hidden; }
.page-annonce .annonce-contact__item .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The author's note when nobody can reach them directly (ANN-7) */
.page-annonce .annonce-contact__owner { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: var(--a-border) dashed var(--a-line); font-size: var(--a-fs-small); }
.page-annonce .annonce-contact__owner span { color: var(--a-ink-2); }

/* Ad: dates and views, "other ads in the neighborhood" */
.page-annonce .annonce-stats { gap: 10px; color: var(--a-muted); font-size: var(--a-fs-small); font-weight: 700; }
.page-annonce .annonce-stats > span { display: flex; align-items: center; gap: 10px; }
.page-annonce .annonce-aside__title { font-size: var(--a-fs-row); font-weight: 800; line-height: 1.3; }

/* Ad: the days pills stay on one line (third fact as wide as its content) */
@media (min-width: 992px) {
    .page-annonce .a-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
}

/*
 * Ad, below 992px (one column): the contact card comes right after the facts card, not after the whole
 * article. The article and the aside are flattened (display: contents) into the grid, then ordered:
 * facts (and the management callout), contact, the rest of the article, the rest of the aside.
 */
@media (max-width: 991.98px) {
    .page-annonce .a-overlap > article,
    .page-annonce .a-overlap > aside { display: contents; }
    .page-annonce .a-overlap > article > * { order: 3; }
    .page-annonce .a-overlap > article > .a-facts { order: 1; }
    /* For the author or an admin, their actions come before the contact card, written for the visitors (N3) */
    .page-annonce .a-overlap > article > .annonce-manage { order: 1; }
    .page-annonce .a-overlap > aside > * { order: 4; }
    .page-annonce .a-overlap > aside > .annonce-contact { order: 2; }
}

/* My ads (.page-my-annonces, Management/ads.html.twig): count and post button in a card on the band */
.page-my-annonces .my-annonces__head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.page-my-annonces .my-annonces__count { margin: 0; color: var(--a-ink-2); font-family: var(--a-font-body); font-size: var(--a-fs-field); font-weight: 600; line-height: var(--a-lh); }
.page-my-annonces .my-annonces__count b { color: var(--a-ink); font-weight: 800; }
/* One main action, "Voir", and "Supprimer" as a discreet link at the end of the row */
.page-my-annonces .my-annonce__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-my-annonces .my-annonce__actions form { display: contents; }
.page-my-annonces .my-annonce__actions .annonce-delete { margin-left: auto; }
@media (max-width: 767.98px) {
    .page-my-annonces .my-annonces__head .btn { width: 100%; }
    /* Main action and "Voir" side by side, "Supprimer" under them */
    .page-my-annonces .my-annonce__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .page-my-annonces .my-annonce__actions .btn { width: 100%; }
    .page-my-annonces .my-annonce__actions .annonce-delete { grid-column: 1 / -1; margin-left: 0; }
}

/* Destructive action as a red link with its icon (my ads, edit page) */
.annonce-delete { display: inline-flex; align-items: center; gap: 8px; }

/*
 * Ad form (.page-annonce-form, Management/_ad_form.html.twig): 24px between all the fields (MES-4), the nested
 * rows included; the legend of a group has the metrics of a label (MES-2: same line in "Disponible à partir de
 * / Type d'accueil"). The label is a block, like the legend: inline-block, it sat on the 18px line of its
 * parent, 3px lower than the legend.
 */
.page-annonce-form .annonce-form form > * + * { margin-top: 24px; }
/* !important, as Bootstrap's utility: in the grid of .annonce-form__row, margins don't collapse (MES-4) */
.page-annonce-form .annonce-form .mb-3 { margin-bottom: 0 !important; }
.page-annonce-form .annonce-form legend.col-form-label { float: none; width: auto; padding: 0; line-height: var(--a-lh); }
.page-annonce-form .annonce-form .form-label { display: block; line-height: var(--a-lh); }
.page-annonce-form .annonce-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
/* Start date: month / year selects (Bootstrap .input-group, the day is hidden) as two separate rounded fields.
   !important: Bootstrap's input-group corner rules are very specific. */
.page-annonce-form .annonce-form .input-group { flex-wrap: nowrap; align-items: center; gap: 8px; }
.page-annonce-form .annonce-form .input-group > .form-select { flex: 3 1 0; margin-left: 0 !important; border-radius: var(--a-radius-field) !important; }
/* The year only needs 4 digits: the month gets the room ("septembre" was cut below 400px, M1) */
.page-annonce-form .annonce-form .input-group > .form-select:last-child { flex-grow: 2; }
/* Days: the 7 pills on one line (MES-3), Sunday included */
.page-annonce-form .annonce-form__days .a-days--toggle { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.page-annonce-form .annonce-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-annonce-form .annonce-form__help { align-self: start; }
/* Edit page: state lines and actions */
.page-annonce-form .annonce-state__lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--a-ink-2); font-size: var(--a-fs-small); font-weight: 700; }
.page-annonce-form .annonce-state__lines li { display: flex; align-items: center; gap: 10px; }
.page-annonce-form .annonce-state__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-annonce-form .annonce-state__actions form { display: contents; }
@media (max-width: 991.98px) {
    /* T17: the help ("Bon à savoir") and the state of the ad come before the form */
    .page-annonce-form .annonce-form__help,
    .page-annonce-form .annonce-state { order: -1; }
}
@media (max-width: 767.98px) {
    .page-annonce-form .annonce-form__row { grid-template-columns: minmax(0, 1fr); }
    .page-annonce-form .annonce-form__actions > .btn { width: 100%; }
    .page-annonce-form .annonce-form__days .a-days--toggle { gap: 4px; }
}