/* ==========================================================================
   Hire Minds Academy — Blog listing
   Markup: resources/views/frontend/blog.blade.php
   Loaded only on /blog, so it is safe to reshape #main-content here.
   ========================================================================== */

/* The shared layout centres #main-content with flex and constrains its height;
   this page needs the full canvas, exactly like the About page does. */
#main-content {
    position: relative;
    display: block;
    min-height: auto;
    padding: 0;
    text-align: left;
    background: #FFFDFB;
}

/* Page-wide aurora — the identical block the home and about pages use, so the
   blog carries the same continuous animated background (blue / pink / yellow /
   violet glows at very low opacity). Fixed, so it never boxes a section. */
#main-content::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgba(150, 120, 255, .30), transparent 26%),
        radial-gradient(circle at 70% 50%, rgba(255, 205, 95, .30), transparent 26%),
        radial-gradient(circle at 50% 70%, rgba(255, 150, 195, .30), transparent 26%),
        radial-gradient(circle at 30% 50%, rgba(120, 178, 255, .30), transparent 26%);
    filter: blur(64px);
    opacity: .55;
    animation: hm-spin 55s linear infinite;
}

@keyframes hm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================== SECTION SHELL ============================== */
.hm-blog {
    position: relative;
    z-index: 1;
    /* sits above the aurora */
    background: transparent;
    /* 80px of breathing room as specced, offset clear of the floating navbar
       (top: 22px + 72px tall = 94px) — a bare 80px would tuck the banner
       underneath it. */
    padding: calc(94px + 80px) 0 100px;
}

/* Pin the container to 1320px, overriding the global .container (style.css caps
   it at 1140). The horizontal padding is a real side gutter — not just the
   max-width centring — so the content never hugs the screen edge when the
   viewport is at or below 1320 (e.g. a 1920 monitor at 150% Windows scaling
   renders ~1280 CSS px, where a bare max-width would leave no margin at all). */
.hm-blog .container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(20px, 3.5vw, 48px);
}

/* ================================= BANNER =================================
   Shared by the listing and the detail page — both designs measure the same. */
.hm-blog__banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 230px;
    padding: 0 60px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
}

.hm-blog__banner-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark scrim so the white title always clears the photo underneath */
.hm-blog__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .45);
}

.hm-blog__banner-title {
    margin: 0 0 10px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    color: #FFFFFF;
    text-transform: uppercase;
}

.hm-blog__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

.hm-blog__crumbs a {
    color: inherit;
    text-decoration: none;
    transition: opacity .25s ease;
}

.hm-blog__crumbs a:hover,
.hm-blog__crumbs a:focus-visible {
    opacity: .7;
}

.hm-blog__crumb-sep {
    opacity: .7;
}

.hm-blog__crumbs li[aria-current="page"] {
    color: #FFFFFF;
}

/* ================================ TOOLBAR ================================
   Search + category on the left, result count hard right.                   */
.hm-blog__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0 32px;
}

.hm-blog__filters {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---- Search ---- */
.hm-blog__search {
    position: relative;
    width: 300px;
}

.hm-blog__search-input {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 16px;
    font-size: 14px;
    color: #23180F;
    background: #FFFFFF;
    border: 1px solid #E4E4E7;
    border-radius: 10px;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.hm-blog__search-input::placeholder {
    color: #9A9A9A;
}

.hm-blog__search-input:focus {
    border-color: var(--hm-gold, #E9A320);
    box-shadow: 0 0 0 3px rgba(233, 163, 32, .14);
}

/* Decorative — the input already carries the accessible label */
.hm-blog__search-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .55;
}

/* ---- Category dropdown ---- */
.hm-blog__cat {
    position: relative;
}

.hm-blog__cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1F6FEB;
    background: #FFFFFF;
    border: 1px solid #1F6FEB;
    border-radius: 10px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.hm-blog__cat-btn:hover,
.hm-blog__cat-btn:focus-visible {
    background: rgba(31, 111, 235, .06);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, .12);
}

.hm-blog__cat-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* No caret asset exists in assets/images/blog/, so the icon font supplies it */
.hm-blog__cat-caret {
    font-size: 11px;
    transition: transform .3s ease;
}

.hm-blog__cat-btn[aria-expanded="true"] .hm-blog__cat-caret {
    transform: rotate(180deg);
}

.hm-blog__cat-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 200px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #ECECEE;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(42, 29, 20, .12);
    /* Animated open/close on transform + opacity only */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.hm-blog__cat.is-open .hm-blog__cat-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hm-blog__cat-menu button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    text-align: left;
    color: #3F3F46;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hm-blog__cat-menu button:hover,
.hm-blog__cat-menu button:focus-visible {
    background: #FFF7E6;
    color: #843D21;
}

/* ---- Result count ---- */
.hm-blog__count {
    margin: 0;
    font-size: 14px;
    color: #6B7280;
    text-align: right;
    white-space: nowrap;
}

/* ================================== GRID ==================================
   Bootstrap row; gutters overridden to the 28px the design calls for.       */
.hm-blog__grid {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 28px;
}

/* ================================== CARD ================================== */
.hm-blog-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 210px;
    padding: 22px;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    /* Per-card tint, set by the --tint-a/--tint-b pair on the modifier below.
       Never a flat colour — always the soft 135deg wash. */
    background: linear-gradient(135deg, var(--tint-a) 0%, var(--tint-b) 100%);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, .06),
        0 18px 40px rgba(0, 0, 0, .05);
    transition:
        transform .4s cubic-bezier(.22, .61, .36, 1),
        box-shadow .4s cubic-bezier(.22, .61, .36, 1),
        filter .4s cubic-bezier(.22, .61, .36, 1);
}

/* Card tints — cycled across the grid exactly like the design. */
.hm-blog-card--blue {
    --tint-a: #F8FDFF;
    --tint-b: #EAF9FF;
}

.hm-blog-card--cream {
    --tint-a: #FFFDF6;
    --tint-b: #FDF4DC;
}

.hm-blog-card--pink {
    --tint-a: #FFFBFC;
    --tint-b: #FDECF1;
}

.hm-blog-card--green {
    --tint-a: #F8FFFC;
    --tint-b: #E9F9F0;
}

.hm-blog-card--lavender {
    --tint-a: #FAF9FF;
    --tint-b: #EFEBFB;
}

.hm-blog-card--peach {
    --tint-a: #FFFCF9;
    --tint-b: #FDEFE4;
}

/* Hover — lift, deepen the shadow, brighten the wash. `filter: brightness`
   keeps this on the compositor instead of repainting the gradient. */
.hm-blog-card:hover,
.hm-blog-card:focus-within {
    transform: translateY(-8px);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .08),
        0 30px 60px rgba(42, 29, 20, .10);
    filter: brightness(1.03);
}

/* ---- Image ---- */
.hm-blog-card__media {
    flex: 0 0 197px;
    width: 197px;
    height: 165px;
    border-radius: 22px;
    overflow: hidden;
    /* clips the zoom so it never breaks the corners */
}

.hm-blog-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hm-blog-card:hover .hm-blog-card__img,
.hm-blog-card:focus-within .hm-blog-card__img {
    transform: scale(1.05);
}

/* ---- Content ---- */
.hm-blog-card__body {
    flex: 1 1 auto;
    min-width: 0;
    /* lets the clamped text shrink instead of overflowing */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    padding: 4px 4px 4px 0;
}

.hm-blog-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #17161A;
    /* Two lines, then ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-blog-card__link {
    color: inherit;
    text-decoration: none;
}

/* The whole card is the hit area; the title link carries the real target. */
.hm-blog-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hm-blog-card__desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #6B7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-blog-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hm-blog-card__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: #4B4B53;
    white-space: nowrap;
}

.hm-blog-card__date-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .8;
}

/* ---- Read More ---- */
.hm-blog-card__more {
    position: relative;
    z-index: 2;
    /* above the title link's overlay */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    background: var(--hm-yellow, #F7B500);
    border-radius: 999px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.hm-blog-card__more:hover,
.hm-blog-card__more:focus-visible {
    background: #843D21;
    /* dark brown */
    color: #FFFFFF;
}

/* =============================== PAGINATION =============================== */
.hm-blog__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 56px;
}

.hm-blog__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}

.hm-blog__page:hover,
.hm-blog__page:focus-visible {
    transform: scale(1.08);
}

.hm-blog__page--prev {
    color: #9A9A9A;
    background: #F1F1F1;
}

.hm-blog__page--current {
    color: #17161A;
    background: #FFFFFF;
    border: 2px solid var(--hm-gold, #E9A320);
}

.hm-blog__page--next {
    color: #FFFFFF;
    background: var(--hm-gold, #E9A320);
    box-shadow: 0 8px 18px rgba(233, 163, 32, .32);
}

/* =============================== RESPONSIVE ===============================
   Tablet — still two columns, shorter cards and a smaller image.            */
@media (max-width: 1199.98px) {
    .hm-blog-card {
        height: 190px;
        gap: 18px;
        padding: 18px;
    }

    .hm-blog-card__media {
        flex-basis: 168px;
        width: 168px;
        height: 154px;
    }

    .hm-blog-card__title {
        font-size: 18px;
    }

    .hm-blog-card__desc {
        font-size: 13.5px;
    }
}

@media (max-width: 991.98px) {
    .hm-blog {
        padding: calc(94px + 56px) 0 72px;
    }

    .hm-blog__banner {
        min-height: 220px;
        padding: 0 36px;
    }

    .hm-blog__banner-title {
        font-size: 34px;
    }

    .hm-blog__toolbar {
        flex-wrap: wrap;
    }

    .hm-blog__count {
        width: 100%;
        text-align: left;
    }

    .hm-blog-card {
        height: 176px;
    }

    .hm-blog-card__media {
        flex-basis: 148px;
        width: 148px;
        height: 140px;
    }
}

/* Mobile — one column, image on top, content beneath. */
@media (max-width: 767.98px) {
    .hm-blog {
        padding: calc(94px + 40px) 0 64px;
    }

    .hm-blog__banner {
        min-height: 180px;
        padding: 0 24px;
        border-radius: 18px;
    }

    .hm-blog__banner-title {
        font-size: 26px;
    }

    .hm-blog__search {
        width: 100%;
    }

    .hm-blog__filters {
        width: 100%;
        flex-wrap: wrap;
    }

    .hm-blog-card {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 16px;
        border-radius: 22px;
    }

    .hm-blog-card__media {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .hm-blog-card__body {
        gap: 12px;
        padding: 0 2px 2px;
    }

    .hm-blog-card__title {
        font-size: 19px;
    }
}

/* Phones — two cards per row (col-6 in the markup). Each card is only ~46vw
   wide, so the image, type and footer all step down; the card keeps the stacked
   image-over-copy layout it already switched to at 768px. */
@media (max-width: 575.98px) {
    .hm-blog__grid {
        --bs-gutter-x: 14px;
        --bs-gutter-y: 14px;
    }

    .hm-blog-card {
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
    }

    .hm-blog-card__media {
        height: clamp(96px, 30vw, 120px);
        border-radius: 14px;
    }

    .hm-blog-card__body { gap: 8px; padding: 0; }

    .hm-blog-card__title { font-size: clamp(12.5px, 3.7vw, 14.5px); }
    .hm-blog-card__desc  { font-size: clamp(10.5px, 3.1vw, 12px); line-height: 1.55; }

    /* Date over button — there is no room for them side by side. */
    .hm-blog-card__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hm-blog-card__date { font-size: clamp(10px, 3vw, 11.5px); gap: 5px; }
    .hm-blog-card__date-icon { width: 14px; height: 14px; }

    .hm-blog-card__more {
        height: 30px;
        padding: 0 12px;
        font-size: 11px;
    }

    .hm-blog__pagination {
        gap: 10px;
    }

    .hm-blog__page {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   BLOG DETAIL
   Markup: resources/views/frontend/blog-details.blade.php
   Reuses the shell above — .hm-blog, the banner, and the search/category row
   are the same components, so only the article + sidebar are new.
   ========================================================================== */

/* The detail design opens 70px below the navbar rather than the listing's 80. */
.hm-blog--details {
    padding-top: calc(94px + 70px);
}

/* Detail toolbar carries no result count, so the filters simply sit left. */
.hm-blog--details .hm-blog__toolbar {
    margin-bottom: 30px;
}

/* col-lg-9 + col-lg-3 against a 1320 container with 30px gutters resolves to
   ~982px of article and ~307px of sidebar — which is what the design measures. */
.hm-post__grid {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

/* ============================== POST CARD ==============================
   The image and the copy are one bordered panel: the figure sits flush at the
   top and the card's own overflow rounds its corners, so there is no seam
   between the two. */
.hm-post {
    background: #FFFFFF;
    border: 1px solid #E9E9EC;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(42, 29, 20, .04);
}

/* Everything below the image is padded; the image itself is not. */
.hm-post__content {
    padding: 24px;
}

/* ============================ FEATURED IMAGE ============================ */
.hm-post__figure {
    margin: 0;
    overflow: hidden;
    /* clips the hover zoom */
}

.hm-post__figure img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hm-post__figure:hover img {
    transform: scale(1.02);
}

/* ================================= META ================================= */
.hm-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 18px;
    font-size: 14px;
    color: #6B7280;
}

.hm-post__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* profile.png is already a circular avatar with its own backdrop, so it fills
   the frame edge to edge — no tile or padding behind it. */
.hm-post__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.hm-post__meta-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: .8;
}

/* ================================ ARTICLE ================================ */
.hm-post__title {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: #1B1B1F;
}

.hm-post__body p {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #555555;
}

/* Rendered as <h3>: the banner carries the page <h1> and the post title the
   <h2>, so the article's section headings sit one level down. The design's
   "H2" sizing is what these carry. */
.hm-post__body h3 {
    margin: 60px 0 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #222222;
}

/* Nothing above it to separate from, so drop the 60px lead-in. */
.hm-post__body>h3:first-child {
    margin-top: 0;
}

.hm-post__body a {
    color: #1B6FE0;
    text-decoration: none;
    transition: color .25s ease;
}

.hm-post__body a:hover,
.hm-post__body a:focus-visible {
    text-decoration: underline;
}

.hm-post__body strong {
    font-weight: 600;
    color: #333333;
}

.hm-post__body ul {
    margin: 0 0 20px;
    padding-left: 22px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #555555;
}

/* ---- Embedded image ---- */
.hm-post__embed {
    margin: 30px auto;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
}

.hm-post__embed img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ================================ SIDEBAR ================================ */
.hm-side__card {
    margin-bottom: 28px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .05);
}

.hm-side__card:last-child {
    margin-bottom: 0;
}

.hm-side__heading {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: #1B1B1F;
}

/* ---- The Latest ---- */
.hm-side__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

/* Image card with the title laid over a scrim, exactly as designed. */
.hm-side__item {
    position: relative;
    display: block;
    height: 170px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(42, 29, 20, .10);
    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        box-shadow .35s cubic-bezier(.22, .61, .36, 1);
}

.hm-side__item:hover,
.hm-side__item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(42, 29, 20, .18);
}

.hm-side__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.hm-side__item:hover img,
.hm-side__item:focus-visible img {
    transform: scale(1.06);
}

/* Scrim — keeps the white title legible over any thumbnail */
.hm-side__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .28) 52%, rgba(0, 0, 0, 0) 100%);
}

.hm-side__item-title {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 1;
    /* above the scrim */
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #FFFFFF;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-side__seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    background: var(--hm-yellow, #F7B500);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.hm-side__seeall:hover,
.hm-side__seeall:focus-visible {
    background: #843D21;
    color: #FFFFFF;
}

/* ---- Tags ---- */
.hm-side__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    background: #F3F4F6;
    border-radius: 1px;
    transition: background .3s ease, color .3s ease;
}

.hm-tag:hover,
.hm-tag:focus-visible {
    background: var(--hm-gold, #E9A320);
    color: #FFFFFF;
}

/* ---- Connect ---- */
.hm-side__social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The icons ship as brand-coloured circles, so the tile only frames them. */
.hm-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(42, 29, 20, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.hm-social:hover,
.hm-social:focus-visible {
    transform: scale(1.1);
    box-shadow: 0 10px 22px rgba(42, 29, 20, .2);
}

.hm-social img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ---- Visible focus for every interactive element on the page ---- */
.hm-blog a:focus-visible,
.hm-blog button:focus-visible {
    outline: 2px solid var(--hm-gold, #E9A320);
    outline-offset: 3px;
}

/* =========================== DETAIL RESPONSIVE ===========================
   col-lg-* already drops the sidebar under the article below 992px.        */
@media (max-width: 1199.98px) {
    .hm-post__figure img {
        height: 420px;
    }
}

@media (max-width: 991.98px) {
    .hm-blog--details {
        padding-top: calc(94px + 56px);
    }

    .hm-post__figure img {
        height: 360px;
    }

    .hm-post__body h3 {
        margin-top: 44px;
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .hm-blog--details {
        padding-top: calc(94px + 40px);
    }

    .hm-post__figure img {
        height: 240px;
    }

    .hm-post__content {
        padding: 18px;
    }

    /* Article type on phones only — the desktop sizes live on the base rules
       above (title 26px, h3 26px, body 16px). Overriding those base rules
       instead of scoping the change here shrank the article on every screen. */
    .hm-post__title {
        font-size: 15px;
    }

    .hm-post__body h3 {
        font-size: 15px;
        margin-top: 36px;
    }

    .hm-post__body p {
        margin-bottom: 14px;
        font-size: 12px;
        line-height: 1.75;
    }

    .hm-post__embed {
        padding: 10px;
    }

    /* Social icons centre once the sidebar is full width */
    .hm-side__social {
        justify-content: center;
    }
}

/* Reduced motion — hold the aurora and drop the travel, keep the states. */
@media (prefers-reduced-motion: reduce) {
    #main-content::before {
        animation: none;
    }

    .hm-blog-card,
    .hm-blog-card__img,
    .hm-blog__page,
    .hm-blog-card__more,
    .hm-blog__cat-menu,
    .hm-post__figure img,
    .hm-side__item,
    .hm-side__item img,
    .hm-social,
    .hm-tag {
        transition: none;
    }

    .hm-blog-card:hover,
    .hm-blog-card:focus-within {
        transform: none;
    }

    .hm-blog-card:hover .hm-blog-card__img,
    .hm-blog-card:focus-within .hm-blog-card__img {
        transform: none;
    }

    .hm-blog__page:hover,
    .hm-blog__page:focus-visible {
        transform: none;
    }

    .hm-post__figure:hover img {
        transform: none;
    }

    .hm-side__item:hover,
    .hm-side__item:focus-visible {
        transform: none;
    }

    .hm-side__item:hover img,
    .hm-side__item:focus-visible img {
        transform: none;
    }

    .hm-social:hover,
    .hm-social:focus-visible {
        transform: none;
    }
}