/* ============================================================
* page-press-v4.css
*
* Loaded only on the Press / Newsroom (v4) page template.
*
* Layout per MDR-OCA-News-v3:
* Hero 440 px tall, photo bg, dark overlay, centered title
* Controls Single-row form: search input (424 x 49) + author select
* Card grid 3 columns desktop, 2 tablet, 1 mobile
* Card Light Gray #F4F4F4 bg, 25 px padding, 16 px gap, flex col
* Image Square 377 x 377 -> width:100% with 1:1 aspect-ratio
* Title Montserrat 600 / 21 / 31 / Prussian Blue #243952
* Divider 1 px line, full width of card
* Excerpt Montserrat 400 / 17 / 27 / Brand Black #18020C
* Read More Montserrat 500 / 16 / 24 / uppercase / Gold #CAA45D
* Load More Gold button .mdl-btn--gold (reused from home-v4.css)
* Strategic CTA Reused from home-v4.css (no overrides needed)
* ============================================================ */
/* ---------- HERO ----------------------------------------- *
* No overlay tint - the full-color background photo shows through.
* Title + subtitle sit at the BOTTOM of the hero (flex-end), with a
* comfortable bottom padding so they don't crash into the photo edge. */
.mdl-press-v4 .mdl-press-hero {
position: relative;
min-height: 560px; /* taller per design request */
background: #243952 center center / cover no-repeat;
color: #fff;
display: flex;
align-items: flex-end; /* bottom alignment */
justify-content: center;
text-align: center;
padding: 96px 32px 72px; /* extra bottom space */
}
.mdl-press-v4 .mdl-press-hero__inner {
position: relative;
z-index: 1;
max-width: 920px;
margin: 0 auto;
}
.mdl-press-v4 .mdl-press-hero__title {
font-family: "Montserrat", sans-serif;
font-weight: 700; /* Bold per Figma */
font-size: 46px;
line-height: 1.25;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
}
.mdl-press-v4 .mdl-press-hero__sub {
font-family: "Montserrat", sans-serif;
font-weight: 600; /* SemiBold per Figma */
font-size: 21px;
line-height: 31px;
color: #fff;
margin: 0;
}
/* ---------- CONTROLS (search + filter) ------------------ *
* Figma spec: underline-only inputs (no box border, no background),
* 424 x 49 each, 24 px gap, total container 872 px wide.
* Both inputs share an identical underline + typography spec so they
* sit cleanly together as a single search row. */
.mdl-press-v4 .mdl-press-controls {
max-width: 960px; /* fits the 872 px Figma row + side padding */
margin: 48px auto 32px;
padding: 0 32px;
}
.mdl-press-v4 .mdl-press-controls__form {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
/* Shared input typography + underline (applies to both fields). */
.mdl-press-v4 .mdl-press-controls__field {
position: relative;
width: 424px;
max-width: 100%;
}
.mdl-press-v4 .mdl-press-controls__field input,
.mdl-press-v4 .mdl-press-controls__field select {
width: 100%;
height: 49px;
padding: 0 36px 0 0; /* room for icon/chevron on the right */
border: 0;
border-bottom: 1px solid #506272; /* Paynes Gray underline - Figma spec */
background: transparent;
color: #15071E;
font-family: "Montserrat", sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: 400;
box-sizing: border-box;
border-radius: 0;
outline: none;
box-shadow: none;
transition: border-color .15s ease;
}
.mdl-press-v4 .mdl-press-controls__field input:focus,
.mdl-press-v4 .mdl-press-controls__field select:focus {
border-bottom-color: var(--mdl-gold, #CAA45D);
}
.mdl-press-v4 .mdl-press-controls__field input::placeholder {
color: #15071E;
opacity: 0.85;
}
/* === Specificity beat-down for parent-theme button rules ====================
* The parent theme has a rule with selector specificity (0, 7, 1) that
* paints every submit button with a colored background, padding, min-width,
* etc. Our class-based selector below is only (0, 2, 0), so even with
* !important the parent's same-importance rule + higher specificity wins.
*
* Solution: target the button by its ID `#mdl-press-search-submit`.
* ID specificity is (1, 0, 0) which trumps any class-based selector.
* The ID rule is duplicated below as the class-based rule (acts as a
* fallback if someone forgets to add the id="" attribute in the markup). */
#mdl-press-search-submit,
#mdl-press-search-submit:hover,
#mdl-press-search-submit:focus,
#mdl-press-search-submit:active,
#mdl-press-search-submit:focus-visible,
.mdl-press-v4 .mdl-press-controls__submit,
.mdl-press-v4 .mdl-press-controls__submit:hover,
.mdl-press-v4 .mdl-press-controls__submit:focus,
.mdl-press-v4 .mdl-press-controls__submit:active,
.mdl-press-v4 .mdl-press-controls__submit:focus-visible {
position: absolute !important;
top: 50% !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 18px 18px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 30px !important;
width: 30px !important;
height: 30px !important;
cursor: pointer !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
letter-spacing: 0 !important;
text-transform: none !important;
flex: 0 0 auto !important;
text-shadow: none !important;
}
/* Gold magnifier on hover. */
#mdl-press-search-submit:hover,
.mdl-press-v4 .mdl-press-controls__submit:hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
#mdl-press-search-submit > svg,
.mdl-press-v4 .mdl-press-controls__submit > svg { display: none !important; }
/* ============================================================
"By Attorney" dropdown — custom control styled to match the
main navigation dropdown (navy #243952 panel, white uppercase
items, gold hover). Replaces the native