/* =========================================================================
   My Nametags Blog (AE) - static blog styles
   Depends on core.css for header, nav, footer, basket, .container, .btn
   and the brand custom properties (--button-color, --text-color, etc.).
   Only blog-specific rules live here.
   ========================================================================= */
:root {
  --blog-max: 1180px;
  --blog-article-max: 760px;
  --blog-cream: var(--accordiansandboxes-color, #f4f1ed);
  --blog-red: var(--button-color, #ed2144);
  --blog-muted: #6b6b6b;
  --blog-line: #e6e3df;
  --blog-radius: 10px;
}

.blog-page {
  font-family: "Nunito Sans", Arial, sans-serif;
  color: var(--text-color, #333);
}

.blog-wrap {
  max-width: var(--blog-max);
  margin: 0 auto;
  padding-inline: 20px;
}

/* ================= HEADER ================= */

/* Divider directly under the menu - same rule the other AE pages use
   (e.g. contact.css), so it lines up with the header line above the menu. */
.main-nav .nav-wrapper {
  border-bottom: 1px solid var(--border-color);
}

/* ================= BREADCRUMB ================= */

.blog-breadcrumb {
  font-size: 13px;
}

.blog-breadcrumb__list {
  margin: 0;
  padding: 14px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.blog-breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blog-muted);
}

.blog-breadcrumb__list li + li::before {
  content: "\203A";
  color: #b9b4ae;
}

.blog-breadcrumb__list a {
  color: var(--blog-muted);
  text-decoration: none;
}

.blog-breadcrumb__list a:hover {
  color: var(--blog-red);
  text-decoration: underline;
}

.blog-breadcrumb__list li[aria-current="page"] {
  color: var(--text-color, #333);
  font-weight: 600;
}

/* ================= LISTING HERO ================= */

/* Full-width band under the menu, matching .products-hero on /our-products. */
.blog-hero {
  background-color: #f9f6f2;
  padding: 20px 0;
}

/* .heading-2 (core.css) supplies size/line-height; this only tightens the
   bottom margin to what .products-hero h2 uses. */
.blog-hero__title {
  margin-bottom: clamp(20px, 4vw, 25px);
}

.blog-hero__strapline {
  margin: 0;
}

/* ================= YEAR NAV ================= */

.blog-years {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}

.blog-years a {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #333);
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-years a:hover,
.blog-years a[aria-current="page"] {
  background: var(--blog-red);
  border-color: var(--blog-red);
  color: #fff;
}

/* ================= MONTH GROUPS (year archive) ================= */

.blog-month {
  margin-top: clamp(32px, 4vw, 52px);
}

.blog-month__heading {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--blog-line);
}

/* ================= CARD GRID ================= */

/* Listing pages get a wider wrap so four 300-325px cards fit per row. */
.blog-listing .blog-wrap {
  max-width: 1340px;
}

/* Cards are 300-325px wide; the number per row adapts to the space. */
.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 325px));
  justify-content: start;
  gap: 22px;
  margin: clamp(24px, 3vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 620px) {
  .blog-cards {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--blog-cream);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback panel for articles with no featured image */
.blog-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--blog-cream);
}

.blog-card__placeholder img {
  width: 45%;
  height: auto;
  object-fit: contain;
  opacity: 0.35;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 0;
}

.blog-card__title {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.blog-card__title a {
  color: var(--color-black, #000);
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--blog-red);
}

.blog-card__excerpt {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--blog-muted);
  margin: 0 0 18px;
  /* Hard cap at 3 lines so every card excerpt is the same height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 0 18px 18px;
  font-size: 0.8rem;
}

.blog-card__date {
  color: #9a9590;
}

.blog-card__read {
  color: var(--blog-red);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.blog-card__read:hover {
  text-decoration: underline;
}

/* ================= ARTICLE PAGE ================= */

.blog-article {
  padding: clamp(24px, 3.5vw, 46px) 0 clamp(40px, 5vw, 70px);
}

.blog-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

@media (max-width: 1000px) {
  .blog-article__layout {
    grid-template-columns: 1fr;
  }
}

.blog-article__inner {
  max-width: var(--blog-article-max);
  min-width: 0;
}

.blog-article__meta {
  font-size: 0.8rem;
  color: #9a9590;
  margin: 0 0 10px;
}

.blog-article__title {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 clamp(20px, 3vw, 32px);
  color: var(--color-black, #000);
}

.blog-article__hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--blog-radius);
  margin: 0 0 clamp(22px, 3vw, 34px);
}

/* --- article body typography --- */

.blog-article__content {
  font-size: 1rem;
  line-height: 1.75;
}

.blog-article__content p {
  margin: 0 0 1.2em;
}

.blog-article__content h2 {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.9em 0 0.7em;
  color: var(--color-black, #000);
}
.blog-article__content h3,
.blog-article__content h4,
.blog-article__content h5,
.blog-article__content h6 {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.6em 0 0.6em;
  color: var(--color-black, #000);
}

.blog-article__content h4,
.blog-article__content h5,
.blog-article__content h6 {
  font-size: 1rem;
}

.blog-article__content ul,
.blog-article__content ol {
  margin: 0 0 1.3em 1.4em;
  padding: 0;
}

.blog-article__content ul {
  list-style: disc;
}

.blog-article__content ol {
  list-style: decimal;
}

.blog-article__content li {
  margin-bottom: 0.6em;
  line-height: 1.65;
}

.blog-article__content a {
  color: var(--text-color, #333);
  text-decoration: underline;
}

.blog-article__content a:hover {
  color: var(--blog-red);
}

.blog-article__content strong {
  font-weight: 700;
}

/* Every image in the article body: fluid, with rounded corners */
.blog-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.blog-article__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.6em;
  border-radius: 8px;
}

/* --- figures, galleries and columns (older posts) --- */

.blog-article__content figure {
  margin: 0 0 1.6em;
}

.blog-article__content figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.blog-article__content .blog-figure--center,
.blog-article__content .blog-figure--center img {
  margin-left: auto;
  margin-right: auto;
}

.blog-article__content figcaption {
  font-size: 0.85rem;
  color: var(--blog-muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

/* Floated images and figures (classic-editor alignment) */
.blog-article__content .blog-img--center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.blog-article__content .blog-img--left,
.blog-article__content .blog-figure--left {
  float: left;
  margin: 0.3em 1.4em 1em 0;
  max-width: 50%;
}

.blog-article__content .blog-img--right,
.blog-article__content .blog-figure--right {
  float: right;
  margin: 0.3em 0 1em 1.4em;
  max-width: 50%;
}

.blog-article__content h2,
.blog-article__content h3,
.blog-article__content .blog-share,
.blog-article__content::after {
  clear: both;
}

.blog-article__content::after {
  content: "";
  display: block;
}

@media (max-width: 560px) {
  .blog-article__content .blog-img--left,
  .blog-article__content .blog-img--right,
  .blog-article__content .blog-figure--left,
  .blog-article__content .blog-figure--right {
    float: none;
    max-width: 100%;
    margin: 0 auto 1.6em;
  }
}

/* Tables */
.blog-article__content .blog-table {
  overflow-x: auto;
}

.blog-article__content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

.blog-article__content th,
.blog-article__content td {
  border: 1px solid var(--blog-line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

/* Two-up image gallery */
.blog-article__content .blog-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-article__content .blog-gallery__item {
  margin: 0;
}

.blog-article__content .blog-gallery__item figure {
  margin: 0;
}

.blog-article__content .blog-gallery__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.blog-article__content .blog-gallery__caption {
  grid-column: 1 / -1;
}

/* Side-by-side image columns */
.blog-article__content .blog-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 1.6em;
}

.blog-article__content .blog-column {
  flex: 1 1 0;
  min-width: 140px;
}

.blog-article__content .blog-column figure {
  margin: 0;
}

@media (max-width: 560px) {
  .blog-article__content .blog-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* Pair of portrait images side by side */
.blog-article__figure-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 1.6em;
}

.blog-article__figure-pair .blog-article__image {
  margin: 0;
  width: 100%;
}

@media (max-width: 560px) {
  .blog-article__figure-pair {
    grid-template-columns: 1fr;
  }
}

/* --- responsive video embed --- */

.blog-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 1.6em;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.blog-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- third-party chart/map embeds (e.g. Datawrapper) --- */

.blog-embed {
  margin: 0 0 1.6em;
}

.blog-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ================= SHARE ROW ================= */

.blog-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 20px 24px;
  background: #f5f5f5;
  border-radius: var(--blog-radius);
}

.blog-share__label {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.blog-share__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-share__links a,
.blog-share__links button {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-black, #000);
  background: #fff;
  border: 1px solid var(--blog-red);
  border-radius: 999px;
  padding: 6px 17px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}

.blog-share__links a:hover,
.blog-share__links button:hover {
  background: var(--blog-red);
  color: #fff;
}

/* ================= MORE FROM THE BLOG ================= */

.blog-more {
  margin: clamp(34px, 4.5vw, 56px) 0 0;
}

.blog-more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--blog-line);
  padding-bottom: 12px;
  margin-bottom: 6px;
}

.blog-more__title {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700;
  margin: 0;
}

.blog-more__all {
  color: var(--blog-red);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.blog-more__all:hover {
  text-decoration: underline;
}

.blog-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-more__list li {
  border-bottom: 1px solid var(--blog-line);
}

.blog-more__list a {
  display: block;
  padding: 15px 0;
  color: var(--text-color, #333);
  text-decoration: none;
  font-size: 0.95rem;
}

.blog-more__list a:hover {
  color: var(--blog-red);
}

/* ================= SIDEBAR ================= */

.blog-sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

@media (max-width: 1000px) {
  .blog-sidebar {
    position: static;
  }
}

.blog-sidebar__title {
  font-family: "Quicksand", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blog-muted);
  margin: 0 0 10px;
}

.blog-sidebar__next a {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-color, #333);
  text-decoration: none;
}

.blog-sidebar__next a:hover {
  color: var(--blog-red);
}

.blog-cta {
  background: var(--blog-cream);
  border-radius: var(--blog-radius);
  padding: 24px 22px;
}

.blog-cta__title {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.blog-cta__text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--blog-muted);
  margin: 0 0 18px;
}

.blog-cta__btn {
  display: inline-block;
  background: var(--blog-red);
  color: #fff;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 6px;
}

.blog-cta__btn:hover {
  opacity: 0.9;
}

/* ================= LISTING PAGE FOOT ================= */

.blog-listing {
  padding-bottom: clamp(44px, 5vw, 76px);
}

/* ================= RTL (Arabic) ================= */

html[lang="ar"] .blog-page,
html[lang="ar"] .blog-page [class^="blog-"],
html[lang="ar"] .blog-page [class*=" blog-"] {
  font-family: "Noto Kufi Arabic", sans-serif;
}

[dir="rtl"] .blog-article__content th,
[dir="rtl"] .blog-article__content td {
  text-align: right;
}