/* ===========================================================================
   SOCIAL MEDIA MANAGEMENT — page styles                    added 2026-09-24
   Copy source: "Media tamer web copy .docx", SOCIAL MEDIA MANAGEMENT.
   Only what is unique to this page. The hero and its photo frame, the tile
   grid, the entrance animation, the draft notes and the closing CTA all come
   from assets/mt-shared.css, which loads first.
   =========================================================================== */

/* --- 01 hero --------------------------------------------------------------
   One button, so the row is spaced with padding rather than the margin
   utility the build ships. Tailwind's pt-8 does not survive this build's
   purge - only pt-7 does, at 28px - so the 32px is set here to match the
   spacing every other hero uses. */
.mt-sm-hero-cta {
  padding-top: 32px
}

/* --- 02 inclusions --------------------------------------------------------
   Seven items do not divide into an even grid, and the odd one out is the
   only entry whose detail is itself a list. So platform coverage becomes a
   full-width strip with the platforms as chips, and the other six run three
   across in two clean rows - no orphan card. Numbered 01–07 in the same
   treatment the home page gives its service cards. */
.mt-sm-n {
  display: block;
  font-family: var(--font-heading), "Arial Narrow", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--mt-orange)
}

/* Platform coverage used to be a full-width panel sitting above the grid, in
   its own two-column layout. Dee asked for it to be the same size as the rest
   (16 Oct 2026), so it is an ordinary .mt-sm-card in position 1 now and the
   panel rules have gone with it. Only the platform chips survive, restyled
   for the narrower card: smaller, and tightened up, because five of them have
   a third of the row to sit in rather than the whole of it. */
.mt-sm-card__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mt-sm-card__list li {
  border: 1px solid var(--mt-border);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--mt-bg-soft, #f8f9fc);
  font-size: 13px;
  font-weight: 700;
  color: var(--mt-navy);
}

/* margin-top was 20px, which was the gap under the panel. With the panel gone
   this is the gap under the section heading, so it takes the panel's 52px. */
.mt-sm-incl {
  margin-top: 52px;
  display: grid;
  gap: 20px
}

@media (min-width:640px) {
  .mt-sm-incl {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width:1024px) {
  .mt-sm-incl {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* The lift lives on the card and the reveal on .mt-sm-cell around it. They
   cannot share an element: .mt-anim [data-reveal].is-in sets transform:none at
   (0,3,0) and would beat the hover rule.
   The shadow is painted on a pseudo-element and faded with opacity rather than
   transitioned as box-shadow - a moving 54px blur repaints the whole card every
   frame, which is what made this stutter. Opacity and transform both composite. */
.mt-sm-cell {
  height: 100%
}

.mt-sm-card {
  position: relative;
  height: 100%;
  padding: 28px 26px;
  border-radius: 20px;
  border: 1px solid var(--mt-border);
  background: #fff;
  will-change: transform;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease
}

.mt-sm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 26px 54px -34px rgba(26, 31, 46, .5);
  transition: opacity .3s ease
}

.mt-sm-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 107, 53, .42)
}

.mt-sm-card:hover::after {
  opacity: 1
}

.mt-sm-card h3 {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--mt-navy)
}

.mt-sm-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--mt-text-muted)
}

@media (prefers-reduced-motion:reduce) {

  .mt-sm-card,
  .mt-sm-card::after {
    transition: none
  }

  .mt-sm-card:hover {
    transform: none
  }
}

/* --- 03 who this is for ---------------------------------------------------
   Three scenarios, so the shared four-column tile grid narrows to three. */
@media (min-width:1024px) {
  .mt-tile-grid.mt-sm-three {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}