/* ---------------------------------------------------------------------------
   media-cards section + hero-center page treatment.
   Loaded on demand by the media-cards section (see its @once <link>). A page
   that uses hero-center links it from <x-slot:head> under the same @once key,
   so the hero never paints uncentred and the file still loads only once.
   /assets/css is cached for a year (CloudFront + browsers): after editing this
   file, bump the ?v query on both links so returning visitors get the change.
   Plain CSS — no Tailwind @apply here. Breakpoints follow the site: md 768px,
   lg 998px.
--------------------------------------------------------------------------- */

/* Hero (reuses the global hero section): opt in with class="hero-center" plus
   img_position="bottom" for centred copy over a wide, cropped banner photo */
.hero-center {
  text-align: center;
}

.hero-center h3,
.hero-center .hero-logo {
  margin-left: auto;
  margin-right: auto;
}

/* Landing pages (/lp/) show the logo above the h1 */
.hero-center .hero-logo {
  padding-left: 0;
  object-position: center top;
}

/* The hero spaces its CTA with md:mr-3 for a second button; a lone CTA would
   sit off centre */
.hero-center .btn {
  margin-right: 0;
}

.hero-center .hero-img-col img {
  aspect-ratio: 16 / 7;
}

@media (min-width: 998px) {
  .hero-center .hero-img-col img {
    aspect-ratio: 25 / 8;
  }
}

/* Logo tile set inline in the h1 ("Google Ads [logo] 搶客"). Sized in em so it
   follows the heading at every width. The tile holds only a block img, so its
   baseline is its own bottom edge and vertical-align is exactly how far it dips
   below the text baseline (inline-flex would align the img bottom instead and
   sink the tile). */
.hero-icon-tile {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin: 0 0.1em;
  vertical-align: -0.1em;
  border-radius: 0.22em;
  background: var(--color-secondary);
  box-shadow: 6px 12px 25px -12px rgba(0, 0, 0, 0.3);
  transform: rotate(8.5deg);
}

.hero-icon-tile img {
  display: block;
  width: 80%;
  height: 80%;
  margin: 10%;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   media-cards
--------------------------------------------------------------------------- */

.section-media-cards .mc-header {
  margin-bottom: 2rem;
}

/* Same heading measure as the feature-banner* section headers */
.section-media-cards .mc-header h2,
.section-media-cards .mc-header h3 {
  max-width: 56rem;
}

.section-media-cards .mc-header.text-center h2,
.section-media-cards .mc-header.text-center h3 {
  margin-left: auto;
  margin-right: auto;
}

/* Query container: desktop photo heights are set in cqw (see the lg block) */
.section-media-cards .mc-grid {
  display: grid;
  gap: 2rem;
  container-type: inline-size;
}

.section-media-cards .mc-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Photos crop to a fixed frame, so mixed source ratios still line up */
.section-media-cards .mc-media {
  overflow: hidden;
  aspect-ratio: 342 / 208;
  border-radius: 0.75rem;
}

.section-media-cards .mc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-media-cards .mc-title {
  margin-bottom: 0.5rem;
}

.section-media-cards .mc-card:not(.mc-banner) .mc-title {
  font-size: 1.25rem;
  line-height: 1.6;
}

.section-media-cards .mc-text {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* banner: copy centred on the photo at every width. The photo sits behind the
   copy and the card grows with the copy, so there is no fixed height here. */
.section-media-cards .mc-banner {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.25rem;
  border-radius: 0.75rem;
  color: var(--color-white);
  text-align: center;
}

.section-media-cards .mc-banner .mc-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: auto;
  border-radius: 0;
}

.section-media-cards .mc-banner .mc-copy {
  position: relative;
}

.section-media-cards .mc-banner .mc-title {
  margin-bottom: 1.25rem;
}

.section-media-cards .mc-banner .mc-subtitle {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Several lines on a phone read better ragged-right than centred */
.section-media-cards .mc-banner .mc-text {
  max-width: 52rem;
  margin: 0 auto;
  color: inherit;
  opacity: 0.9;
  text-align: left;
}

@media (min-width: 768px) {
  .section-media-cards .mc-banner .mc-text {
    text-align: center;
  }
}

@media (min-width: 998px) {
  .section-media-cards .mc-header {
    margin-bottom: 2.5rem;
  }

  .section-media-cards .mc-grid {
    grid-template-columns: repeat(var(--mc-cols, 3), minmax(0, 1fr));
    gap: 1.5rem;
  }

  .section-media-cards .mc-card {
    grid-column: span var(--mc-span, 1);
    gap: 1.25rem;
  }

  /* 384px tall on the full 1072px grid, scaling with the grid below that, so
     cards of any span share one height and keep their proportions: a fixed
     height would crop narrow cards harder the narrower the window gets */
  .section-media-cards .mc-media {
    aspect-ratio: auto;
    height: 35.82cqw;
    border-radius: 1.25rem;
  }

  /* Shorter stack photos keep the 384 x 232 card ratio of the design, so
     screenshots that run edge to edge are never trimmed at the sides */
  .section-media-cards .mc-img-sm .mc-stack .mc-media {
    height: auto;
    aspect-ratio: 384 / 232;
  }

  .section-media-cards .mc-card:not(.mc-banner) .mc-title {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
    line-height: 1.4;
  }

  /* split: photo left, copy right */
  .section-media-cards .mc-split {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
  }

  /* overlay: copy on a dark fade across the foot of the photo */
  .section-media-cards .mc-overlay {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    color: var(--color-white);
  }

  .section-media-cards .mc-overlay .mc-media {
    border-radius: 0;
  }

  .section-media-cards .mc-overlay .mc-copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 3rem 2rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 70%);
  }

  .section-media-cards .mc-overlay .mc-copy > * {
    max-width: 40rem;
  }

  .section-media-cards .mc-overlay .mc-text {
    color: inherit;
    opacity: 0.9;
  }

  .section-media-cards .mc-banner {
    padding: 4.5rem 6rem;
    border-radius: 1rem;
  }

  .section-media-cards .mc-banner .mc-title {
    margin-bottom: 3rem;
  }

  .section-media-cards .mc-banner .mc-subtitle {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
  }
}