/* Model section only — 2026-08-07.
   The global logo carries a hardcoded ::after reading "Professional Makeup
   Artist". On the modelling pages that is the wrong business (ADMIN: "do proper
   modeling proper makeup separate"), so the lockup is relabelled here rather
   than by touching the site-wide rule. */
a.logo--model::after { content: 'Model · Casablanca'; }
a.logo--mannequin::after { content: 'Mannequin · Casablanca'; }
a.logo--aarida::after { content: 'عارضة أزياء · الدار البيضاء'; }
/* Arabic makeup-artist lockup. The portfolio is makeup work, so it must not
   carry the modelling label. */
a.logo--makeup-ar::after { content: 'خبيرة تجميل محترفة · الدار البيضاء'; }
a.logo--maquilleuse::after { content: 'Maquilleuse professionnelle · Casablanca'; }

/* Category cards on the hub read as a set rather than a stack. */
.mp-cats { display: grid; gap: 18px; margin: 8px 0 0; }
@media (min-width: 760px) { .mp-cats { grid-template-columns: repeat(2, 1fr); } }
.mp-cats .mp-card { padding: 26px 28px; }
.mp-cats .mp-card h3 { font-family: var(--font-serif); font-size: 1.35rem; margin: 0 0 10px; }
.mp-cats .mp-card h3 a { color: var(--primary); text-decoration: none; }
.mp-cats .mp-card h3 a:hover { color: var(--secondary); }
.mp-cats .mp-card p { margin: 0; color: var(--text-light); line-height: 1.7; font-size: 0.95rem; }

/* Steps and tag lists inside the model pages. */
.mp-steps { padding-left: 1.2em; }
.mp-steps li { margin-bottom: 14px; color: var(--text-light); line-height: 1.8; }
/* `.mp-tags li` is ALREADY a pill in makeup-products.css — background, border
   and 999px radius. Styling the inner <a> as a pill too produced a visible
   ring inside a ring. The li owns the pill; the anchor only fills it. */
.mp-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mp-tags li { transition: var(--transition); }
.mp-tags li:hover { background: var(--rose); border-color: var(--secondary); }
.mp-tags li a {
    display: block; padding: 0; border: 0; background: none;
    text-decoration: none; color: var(--primary);
    font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.mp-tags li:hover a { color: var(--secondary); }

[dir="rtl"] .mp-steps { padding-left: 0; padding-right: 1.2em; }

/* Portfolio grid — 2026-08-08. Cards, not heroes: these are phone photographs
   in domestic rooms, and at card size the makeup is the subject. Stretched to
   full width the pink bedroom wall becomes the subject instead. */
.pf-grid { display: grid; gap: 20px; margin: 26px 0 0;
           grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pf-item { margin: 0; background: var(--cream); border-radius: 10px; overflow: hidden;
           display: flex; flex-direction: column; }
.pf-item picture { display: block; line-height: 0; }
.pf-img { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16;
          object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.pf-item:hover .pf-img { transform: scale(1.03); }
.pf-item figcaption { padding: 14px 16px 18px; font-family: var(--font-sans); }
.pf-item figcaption strong { display: block; font-size: .74rem; letter-spacing: .16em;
          text-transform: uppercase; color: var(--secondary); margin-bottom: 7px; }
.pf-item figcaption span { display: block; font-size: .88rem; line-height: 1.6;
          color: var(--text-light); }
@media (max-width: 520px) { .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pf-item figcaption { padding: 10px 12px 14px; }
  .pf-item figcaption span { font-size: .8rem; } }


/* ---------------------------------------------------------------------------
   Fixes for regressions introduced by the link-colour pass, 2026-08-08.
   --------------------------------------------------------------------------- */

/* 1. Buttons are not body text. The prose underline rule was reaching .btn
      inside a <p>, underlining the WhatsApp CTA and tinting it rose on plum. */
.btn, a.btn, .btn-primary, .btn-outline, .btn-nav,
.mp-cta .btn, .mp-cta a.btn { text-decoration: none !important; }
.mp-cta .btn-primary { color: var(--white); }
.mp-cta .btn-primary:hover { color: var(--primary); background: transparent; }

/* 2. "Full portfolio →" and similar inline CTAs read as links, not as
      underlined body copy. Underline on hover only. */
.mp-section > p > a[href$="/portfolio/"],
.mp-also p a, .pf-more a {
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
}
.mp-section > p > a[href$="/portfolio/"]:hover,
.mp-also p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 3. Category cards: equal height and one consistent border. Previously the
      grid left ragged heights and .mp-card:hover could leave a stronger
      border on one card while its neighbours stayed rose. */
.mp-cats { align-items: stretch; }
.mp-cats .mp-card {
    display: flex; flex-direction: column; height: 100%;
    border: 1px solid var(--rose); background: var(--white);
}
.mp-cats .mp-card:hover { border-color: var(--accent); }
.mp-cats .mp-card p { margin-top: auto; }

/* 4. .mp-note carries a left accent bar by design, but inside a centred
      .mp-cta that bar floats away from the text it belongs to. */
.mp-cta .mp-note {
    border-left: 0;
    background: none;
    padding: 0;
    margin-top: 18px;
    text-align: center;
}