/* Homepage Dinosaur Week module. From the design: a tint panel with the xl
   radius and 32 padding, a 560 x 412 photo with the lg radius beside centred
   copy (24 apart): the QUEENSLAND eyebrow, the wordmark at 500, Body lg on
   480, and a plum lg button. Two columns from tablet up, stacked on a phone. */
.dea-dw { background: var(--dea-bg-page); padding: 0 var(--dea-gutter); }

.dea-dw__inner {
  max-width: var(--dea-max);
  margin-inline: auto;
  background: var(--dea-bg-tint);
  border-radius: var(--dea-radius-xl);
  padding: var(--dea-panel-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) {
  .dea-dw__inner { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
  .dea-dw__inner--noimage { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  /* 560 of the 1216 inside the panel. */
  .dea-dw__inner { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 64px; }
  .dea-dw__inner--noimage { grid-template-columns: minmax(0, 1fr); }
}

.dea-dw__media {
  border-radius: var(--dea-radius-lg);
  overflow: hidden;
  aspect-ratio: 295 / 200;
  background: var(--dea-bg-sand);
}
@media (min-width: 768px) { .dea-dw__media { aspect-ratio: 280 / 320; } }
@media (min-width: 1024px) { .dea-dw__media { aspect-ratio: 560 / 412; } }
.dea-mod .dea-dw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dea-dw__content { display: grid; gap: 24px; justify-items: center; text-align: center; }

.dea-dw__eyebrow {
  margin: 0;
  font: var(--dea-type-title-lg); letter-spacing: var(--dea-track-title); text-transform: uppercase;
  color: var(--dea-text-heading);
}
.dea-dw__wordmark { margin: 0; width: 100%; max-width: 500px; line-height: 0; }
.dea-mod .dea-dw__wordmark img { display: block; width: 100%; height: auto; }
.dea-dw__wordmark-text {
  display: block;
  font: var(--dea-type-section); letter-spacing: var(--dea-track-head); text-transform: uppercase;
  color: var(--dea-action-secondary);
}

.dea-dw__body {
  margin: 0;
  max-width: 480px;
  font: var(--dea-type-body-lg);
  color: var(--dea-text-body);
}
@media (max-width: 1023px) {
  .dea-dw__wordmark { max-width: 100%; }
  .dea-dw__body { max-width: 100%; font: var(--dea-type-body-md); }
}

/* The design system's Button, plum, lg. Written out here rather than via the
   .dea-btn classes until the module's markup can carry them. */
.dea-dw__cta, .dea-dw__cta:focus, .dea-dw__cta:active {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 64px; margin: 0; padding: 0 40px;
  border-radius: var(--dea-radius-full);
  background-color: var(--dea-action-secondary); color: var(--dea-action-on-action);
  font: var(--dea-type-cta-lg); text-align: center; text-decoration: none;
  transition: background-color .2s ease, transform .25s var(--dea-ease);
}
.dea-dw__cta:hover { background-color: var(--dea-action-secondary-hover); color: var(--dea-action-on-action); transform: translateY(-2px); }
.dea-dw__cta:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 3px; }