/* =============================================================================
   Cooler Concepts — Blog Listing Grid
   -----------------------------------------------------------------------------
   Every selector is namespaced under .cc-blog-listing / .cc-blog-card so this
   file cannot collide with the theme.

   Typography is deliberately NOT set at the family level — the module inherits
   the site's font stack so it matches automatically.

   The token block below is the only place you should need to edit to tune the
   module to the brand. Swap the hex values for the theme's real ones.
============================================================================= */

.cc-blog-listing {
   /* Brand
     --accent is the true brand cyan, rgba(0, 173, 231, 1). It only reaches
     2.6:1 against white, so it is used for FILLS and large colour only.
     --accent-text is the same hue darkened to 4.65:1 for text on white. */
  --cc-blog-accent: #00ade7;
  --cc-blog-accent-hover: #00c2ff;        /* lighter, for fills on hover */
  --cc-blog-accent-text: #007dab;         /* links / small text on white */
  --cc-blog-accent-text-hover: #005f82;

  /* Ink */
  --cc-blog-ink: #1c2a35;
  --cc-blog-ink-muted: #4a5a68;

  /* Surfaces */
  --cc-blog-surface: #ffffff;
  --cc-blog-surface-alt: #eef7fb;
  --cc-blog-border: #dde3e8;

  /* Shape & rhythm */
  --cc-blog-radius: 4px;
  --cc-blog-gap: 32px;
  --cc-blog-shadow: 0 1px 2px rgba(28, 42, 53, 0.06);
  --cc-blog-shadow-hover: 0 8px 24px rgba(28, 42, 53, 0.12);

  box-sizing: border-box;
  padding: 64px 0;
  color: var(--cc-blog-ink-muted);
}

.cc-blog-listing *,
.cc-blog-listing *::before,
.cc-blog-listing *::after {
  box-sizing: border-box;
}

.cc-blog-listing__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Section header ------------------------------------------------------ */

.cc-blog-listing__header {
  max-width: 44rem;
  margin: 0 0 40px;
}

.cc-blog-listing__heading {
  margin: 0;
  color: var(--cc-blog-ink);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
}

.cc-blog-listing__intro {
  margin-top: 12px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.cc-blog-listing__intro > :first-child { margin-top: 0; }
.cc-blog-listing__intro > :last-child  { margin-bottom: 0; }

/* --- Grid ----------------------------------------------------------------
   Mobile first: 1 across, then 2, then 3. Breakpoints follow the common
   HubSpot theme values (768 / 992); adjust if the theme differs.           */

.cc-blog-listing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-blog-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-blog-listing__item {
  display: flex;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .cc-blog-listing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .cc-blog-listing__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Card ---------------------------------------------------------------- */

.cc-blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--cc-blog-surface);
  border: 1px solid var(--cc-blog-border);
  border-radius: var(--cc-blog-radius);
  box-shadow: var(--cc-blog-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cc-blog-card:hover {
  border-color: #c6d0d8;
  box-shadow: var(--cc-blog-shadow-hover);
  transform: translateY(-2px);
}

/* Thumbnail ---------------------------------------------------------------
   A fixed 16:9 box keeps every card the same height regardless of the source
   image's aspect ratio.                                                     */

.cc-blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cc-blog-surface-alt);
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
  .cc-blog-card__media {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .cc-blog-card__image,
  .cc-blog-card__fallback {
    position: absolute;
    inset: 0;
  }
}

.cc-blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cc-blog-card:hover .cc-blog-card__image {
  transform: scale(1.04);
}

/* Posts with no featured image get a quiet branded panel with a single
   diagonal accent rule, so the grid never breaks alignment. */
.cc-blog-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--cc-blog-surface-alt);
  background-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent 48%,
    var(--cc-blog-border) 48%,
    var(--cc-blog-border) 52%,
    transparent 52%,
    transparent 100%
  );
}

/* Card body --------------------------------------------------------------- */

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

.cc-blog-card__title {
  margin: 0 0 20px;
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 700;
}

.cc-blog-card__title-link {
  color: var(--cc-blog-ink);
  text-decoration: none;
}

.cc-blog-card__title-link:hover,
.cc-blog-card__title-link:focus-visible {
  color: var(--cc-blog-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Read More --------------------------------------------------------------- */

.cc-blog-card__more {
  align-self: flex-start;
  margin-top: auto;
  color: var(--cc-blog-accent);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.cc-blog-card__more::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.2s ease;
}

.cc-blog-card__more:hover,
.cc-blog-card__more:focus-visible {
  color: var(--cc-blog-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-blog-card__more:hover::after {
  transform: translate(3px, -1px) rotate(45deg);
}

/* --- View all ------------------------------------------------------------ */

.cc-blog-listing__footer {
  margin-top: 48px;
  text-align: center;
}

.cc-blog-listing__view-all {
  display: inline-block;
  padding: 14px 32px;
  background: var(--cc-blog-accent);
  border: 2px solid var(--cc-blog-accent);
  border-radius: var(--cc-blog-radius);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cc-blog-listing__view-all:hover,
.cc-blog-listing__view-all:focus-visible {
  background: var(--cc-blog-accent-hover);
  border-color: var(--cc-blog-accent-hover);
  color: #fff;
}

/* --- Focus & motion ------------------------------------------------------ */

.cc-blog-listing a:focus-visible {
  outline: 2px solid var(--cc-blog-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-blog-listing *,
  .cc-blog-listing *::before,
  .cc-blog-listing *::after {
    transition: none !important;
  }
  .cc-blog-card:hover { transform: none; }
  .cc-blog-card:hover .cc-blog-card__image { transform: none; }
}

/* --- Utility ------------------------------------------------------------- */

.cc-blog-listing__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}