/**
 * base.css
 *
 * Global utility and layout fixes that don't belong to a specific paragraph
 * type, component, or feature CSS file.
 *
 * Use this file for:
 * - Generic mobile responsive fixes affecting multiple content types
 * - DS entity class overrides (.boxREM, etc.)
 * - Utility rules that apply site-wide
 *
 * Do NOT use this file for:
 * - Image/media cascade fixes → img-overrides.css
 * - Paragraph-specific styles → css/partials/paragraphs/<name>.css
 * - Variables/tokens → css/base/variables.css
 */

/* ============================================================
   .boxREM — DS entity class applied to many paragraph types.
   Defined in compiled styles.css as padding: 30px.
   Only reduce padding for layout/card paragraphs (html-text-area)
   where 30px squishes image cards to ~60% viewport width.
   Text paragraphs (paragraph--type-text) keep full 30px padding
   so body copy has sufficient breathing room on mobile.
   ============================================================ */
@media (max-width: 767px) {
  .paragraph--type-html-text-area-for-home-page.boxREM {
    padding: 10px !important;
  }
}

/* ============================================================
   Article embed tile — consistent text padding on mobile.
   .embedTileTitle has no padding while .embedTileSummary has
   20px left/right, causing the title to sit flush with the
   full-bleed image while the summary is indented. Match them.
   ============================================================ */
@media (max-width: 767px) {
  .embedTileTitle {
    padding-left: 20px;
    padding-right: 20px;
  }
}