/* ========================================================================== Global fixes — CSS overrides. Never edit compiled/build files directly. ========================================================================== */ /* ── Single post: remove classic-block container constraint ───────────────── WordPress adds .single-post to on all single blog post pages. The classic-block wrapper adds padding + max-width that prevents full-width Elementor content (e.g. hero carousel) from reaching the viewport edges. */ body.single-post .classic-block { padding: 0; } body.single-post .classic-block__container { max-width: none; } /* ── Hero Carousel ────────────────────────────────────────────────────────── The base swiper/css (display:flex on .swiper-wrapper, flex-shrink:0 on .swiper-slide) was previously a side-effect of more-articles-grid loading its Vue bundle. That bundle no longer loads, so we supply the rules here. */ .hero-carousel .swiper-wrapper { display: flex; position: relative; width: 100%; z-index: 1; transition-property: transform; box-sizing: content-box; } .hero-carousel .swiper-slide { flex-shrink: 0; width: 100%; position: relative; } /* Suppress Swiper's default ::after icon (uses swiper-icons font; renders as literal "next"/"prev" text when the font fails to load). The SVG arrows in the PHP template are used instead. */ .hero-carousel .swiper-button-next::after, .hero-carousel .swiper-button-prev::after { display: none; } .hero-carousel .swiper-button-next svg, .hero-carousel .swiper-button-prev svg { width: 44px; height: 44px; display: block; } /* Hero Carousel: clip adjacent slides that bleed through when Swiper miscalculates slide widths. The .swiper-container already has overflow:hidden in the compiled SCSS but the parent .image-wrapper does not, allowing the next slide to be visible alongside the active one. */ .hero-carousel .image-wrapper { overflow: hidden; } /* ── More Articles Grid — Swiper carousel (mobile) + CSS grid (desktop) */ .mag-grid { padding-top: var(--block-margin-tb); padding-bottom: var(--block-margin-tb); } .mag-grid.properties { background-color: var(--light-grey); } .mag-grid__inner { display: flex; flex-direction: column; gap: 1.5625rem; } .mag-grid__header { display: grid; grid-template-columns: auto auto; align-items: center; padding: 0 var(--block-padding-lr); } .mag-grid__cta { color: var(--black); background: transparent; border: 1px solid var(--black); border-radius: 0; font-size: 0.9375rem; font-family: var(--futura-std); font-weight: 400; letter-spacing: 0.09375rem; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 0.6875rem 1.375rem 0.5625rem; min-width: 7.375rem; min-height: 2.375rem; margin-left: auto; transition: color 0.5s ease, background-color 0.5s ease, border 0.5s ease; } .mag-grid__cta:hover, .mag-grid__cta:focus { color: var(--black); border-color: var(--black); } /* ── Swiper container */ .mag-grid .mag-grid__track { padding: 0 var(--block-padding-lr); overflow: hidden; } /* ── Card: full width in Swiper slide */ .mag-grid .mag-grid__card { box-sizing: border-box; height: auto; } /* ── Swiper pagination dots */ .mag-grid .swiper-pagination { position: static; margin-top: 1rem; display: flex; justify-content: center; gap: 8px; } .mag-grid .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--grey, #aaa); opacity: 1; flex-shrink: 0; } .mag-grid .swiper-pagination-bullet-active { background: var(--black, #000); opacity: 1; } /* ── Desktop: override Swiper → CSS grid */ @media (min-width: 768px) { .mag-grid .mag-grid__track { overflow: visible; } .mag-grid .swiper-wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; transform: none !important; width: auto !important; flex-wrap: wrap; } .mag-grid .swiper-slide { width: auto !important; margin-right: 0 !important; height: auto !important; } .mag-grid .swiper-pagination { display: none; } } @media (min-width: 1440px) { .mag-grid .swiper-wrapper { grid-template-columns: repeat(4, 1fr); } } /* ── More Articles Grid — mobile CSS scroll-snap carousel ────────────────── Swiper JS is not reliably available globally, so we implement the carousel with native CSS scroll-snap. Works without JS; Swiper can layer on top if it does initialise. */ @media (max-width: 767px) { .mag-grid .mag-grid__track { display: block; position: relative; width: 100%; padding: 0 48px 0 0; /* right padding = peek width; lets browser scroll far enough to snap last slide */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mag-grid .mag-grid__track::-webkit-scrollbar { display: none; } .mag-grid .swiper-wrapper { display: flex !important; gap: 16px; width: max-content; } .mag-grid .swiper-slide { width: calc(100vw - 48px); flex-shrink: 0; scroll-snap-align: start; } /* Pagination dots — centred below the slide */ .mag-grid .swiper-pagination { position: static; display: flex !important; justify-content: center; width: 100%; margin-top: 1rem; gap: 8px; } } /* ── Archive grid — category / tag / blog-archive pages ──────────────────── Copied verbatim from the compiled Vue chunks that the JS lazy-loader normally injects (category-grid-scss.css, 1339.css, 1983.css). Guaranteed to load because fixes.css is always enqueued globally. */ /* section header */ .category-grid__container{width:100%;margin-left:auto;margin-right:auto;padding:3.125rem var(--block-padding-lr) 0} @media screen and (min-width:1024px){.category-grid__container{overflow:hidden;max-width:80%}} @media screen and (min-width:1440px){.category-grid__container{padding:3.75rem 15% 0;max-width:93.75rem}} .category-grid__header{text-align:center;width:100%;display:grid;justify-content:center;grid-template-columns:auto;row-gap:10px} .category-grid__header span{font-size:.6875rem;font-family:var(--futura-std);font-style:normal;font-weight:500;line-height:normal;letter-spacing:.06875rem;text-transform:uppercase;color:var(--teal-green)} @media screen and (min-width:768px){.category-grid__header span{font-size:.75rem;letter-spacing:.075rem}} .category-grid__header h1{margin-bottom:0;text-transform:uppercase} .category-grid__header p{max-width:835px;margin:0 auto;font-family:var(--noe-display-regular-italic);line-height:normal;font-weight:400;font-size:1.25rem;font-style:italic} @media screen and (min-width:768px){.category-grid__header p{font-size:1.375rem}} @media screen and (min-width:1024px){.category-grid__header p{font-size:1.375rem}} /* grid container */ .magazine-issue-grid__container{width:100%;margin-left:auto;margin-right:auto} @media screen and (min-width:768px){.magazine-issue-grid__container{padding:0 var(--block-padding-lr) var(--block-margin-tb)}} @media screen and (min-width:1024px){.magazine-issue-grid__container{overflow:hidden;max-width:80%}} @media screen and (min-width:1440px){.magazine-issue-grid__container{max-width:93.75rem}} /* card grid — base (blog archive / tag) */ .magazine-issue-grid__cards{display:grid;row-gap:2.5rem;padding:0 var(--block-padding-lr)} @media screen and (min-width:375px){.magazine-issue-grid__cards{grid-template-columns:repeat(2,1fr);row-gap:2.5rem;column-gap:1.25rem}} @media screen and (min-width:768px){.magazine-issue-grid__cards{padding:0;grid-template-columns:repeat(3,1fr);row-gap:0;column-gap:1.875rem}} @media screen and (min-width:768px){.magazine-issue-grid__cards>article:nth-child(3n+2){margin-top:-3.125rem}.magazine-issue-grid__cards>article:not(:nth-child(3n+2)){margin-bottom:3.125rem}} @media screen and (min-width:1440px){.magazine-issue-grid__cards{grid-template-columns:repeat(4,1fr);row-gap:0;column-gap:2.5rem}} @media screen and (min-width:1440px){.magazine-issue-grid__cards>article:nth-child(2n){margin-top:-3.125rem}.magazine-issue-grid__cards>article:not(:nth-child(2n)){margin-top:0;margin-bottom:3.125rem}} /* card grid — category archive masonry overrides */ .category .magazine-issue-grid__cards{grid-template-columns:1fr} @media screen and (min-width:768px){.category .magazine-issue-grid__cards{grid-template-columns:repeat(2,1fr);row-gap:0}} @media screen and (min-width:768px){.category .magazine-issue-grid__cards>article:nth-child(2n+2){margin-top:-3.125rem}.category .magazine-issue-grid__cards>article:not(:nth-child(2n+2)){margin-bottom:3.125rem}} @media screen and (min-width:1024px){.category .magazine-issue-grid__cards{grid-template-columns:repeat(3,1fr)}} @media screen and (min-width:1024px){.category .magazine-issue-grid__cards>article:nth-child(2n+2),.category .magazine-issue-grid__cards>article:not(:nth-child(2n+2)){margin-top:0;margin-bottom:0}.category .magazine-issue-grid__cards>article:nth-child(3n+2){margin-top:-3.125rem}.category .magazine-issue-grid__cards>article:nth-child(3n+3){margin-top:3.125rem}.category .magazine-issue-grid__cards>article:not(:nth-child(3n+3)){margin-bottom:3.125rem}} /* article card */ .article-card{width:100%} .article-card figure{max-width:100%;min-width:unset;padding:0;margin:0;width:100%;display:flex;flex-direction:column;gap:30px} .article-card figure .card-img img{object-fit:cover;object-position:center} @supports(aspect-ratio:333/290){.article-card figure .card-img img{height:inherit;aspect-ratio:416/357}} @supports not (aspect-ratio:333/290){.article-card figure .card-img{position:relative;width:100%;height:100%;padding:100% 0 0}.article-card figure .card-img a{display:contents}.article-card figure .card-img img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}} .article-card figure figcaption{display:flex;flex-direction:column;gap:10px} .article-card figure figcaption .card-header{font-size:.75rem;font-family:var(--futura-std);font-style:normal;font-weight:500;line-height:normal;letter-spacing:.075rem;color:var(--dark-grey);text-transform:uppercase} @media screen and (min-width:1024px){.article-card figure figcaption .card-header{font-size:.8125rem;letter-spacing:.08125rem}} .article-card figure figcaption a.card-cat{color:var(--teal-green)} .article-card figure figcaption time.card-date{color:var(--dark-grey)} .article-card figure figcaption .author{margin-top:.625rem;display:none} /* load more button */ .category-grid .btn-load-more{color:var(--black);background-color:transparent;border:1px solid var(--black);border-radius:0;font-size:.9375rem;font-family:var(--futura-std);font-style:normal;font-weight:400;line-height:100%;letter-spacing:.09375rem;text-transform:uppercase;display:flex;justify-content:center;align-items:center;text-decoration:none;text-align:center;transition:color .5s ease,background-color .5s ease,border .5s ease;cursor:pointer;width:fit-content;min-width:7.375rem;min-height:2.375rem;padding:.6875rem 1.375rem .5625rem;margin:3.125rem auto 5rem} @media screen and (min-width:768px){.category-grid .btn-load-more{margin:4.375rem auto 5rem}} .category-grid .btn-load-more:hover,.category-grid .btn-load-more:active,.category-grid .btn-load-more:focus{color:var(--black);border:1px solid var(--black);background-color:transparent} .category-grid .btn-load-more[disabled]{cursor:not-allowed;opacity:.8} /* ── Featured Articles — mobile (< 768px) ─────────────────────────────────── Override horizontal-scroll flex layout with a single-column vertical grid. The compiled SCSS uses flex + overflow-x: auto on mobile; this replaces it. */ @media (max-width: 767px) { .featured-articles__grid { display: grid !important; grid-template-columns: 1fr !important; overflow-x: visible !important; scroll-snap-type: none !important; padding-bottom: 0 !important; gap: 32px !important; } .featured-articles__grid > div { min-width: unset !important; flex-shrink: unset !important; width: 100% !important; } /* Full-width image with a sensible portrait-ish aspect ratio on mobile */ .featured-articles .article-card figure .card-img img, .featured-articles .page-search__card figure .card-img img { aspect-ratio: 4 / 3 !important; width: 100% !important; height: auto !important; } } /* ── Single post — constrain inner Elementor containers on wide screens ─────*/ @media (min-width: 1000px) and (max-width: 1439px) { .single-post .elementor > .e-con:not(:first-child) { width: 96% !important; margin-inline: auto !important; } } @media (min-width: 1440px) { .single-post .elementor > .e-con:not(:first-child) { max-width: 56rem !important; margin-inline: auto !important; } }