/* ============================================================================
   Blog feature stylesheet
   Loaded by Areas/Public/Views/Blogs/BlogDetail.cshtml (and BlogList if needed).
   Two responsibilities:
     1. Layout safety -- protect the page when an editor pastes arbitrary HTML
        (Word, Google Docs, third-party widget snippets, etc.) into Summernote.
     2. Optional break-out classes (.blog-wide, .blog-full) so an editor can
        intentionally widen a specific block (e.g. a 3-card row) without
        breaking the readability of surrounding prose text.
   ============================================================================ */

/* ---------- 1. Article body container -------------------------------------- */
.blog-content {
    /* Last-line defence: if pasted content extends past the column, clip rather
       than force the whole page to scroll horizontally. Combined with the
       per-element max-width rules below, this should rarely fire. */
    overflow-x: hidden;

    /* Readable typography -- tweak to taste. */
    line-height: 1.7;
    color: #222;
    word-wrap: break-word;             /* legacy alias */
    overflow-wrap: anywhere;           /* break very long URLs/tokens */
}

.blog-content p { margin-bottom: 1em; }
.blog-content h2,
.blog-content h3,
.blog-content h4 { margin-top: 1.6em; margin-bottom: .6em; }
.blog-content h2 { font-size: 1.6rem; }
.blog-content h3 { font-size: 1.3rem; }
.blog-content h4 { font-size: 1.1rem; }
.blog-content ul,
.blog-content ol { padding-left: 1.4em; margin-bottom: 1em; }
.blog-content blockquote {
    border-left: 4px solid #0d6efd;
    padding: .5em 1em;
    margin: 1em 0;
    color: #555;
    background: #f7f9fc;
}

/* ---------- 2. Media safety rules ------------------------------------------ */
/* Any media -- including pasted oversized images, YouTube/Vimeo embeds, ads --
   is force-fit to the column. Aspect ratio is preserved via height:auto. */
.blog-content img,
.blog-content video,
.blog-content iframe,
.blog-content embed,
.blog-content object,
.blog-content svg {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Tables: scroll horizontally rather than push the layout wider.
   Wrap in a scroll container so wide pricing tables / data tables work
   without breaking the column. */
.blog-content table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 1em 0;
}
.blog-content table th,
.blog-content table td {
    padding: .5em .75em;
    border: 1px solid #e3e6ea;
}

/* Code blocks: wrap long lines, allow horizontal scroll for genuinely wide code. */
.blog-content pre,
.blog-content code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
}
.blog-content pre {
    background: #f6f8fa;
    border-radius: 4px;
    padding: .8em 1em;
    font-size: .9em;
}

/* ---------- 3. Hostile / Word-paste neutralisation ------------------------- */
/* Word and Google Docs love to paste inline styles that fight the layout.
   Strip them defensively. !important is justified -- editor-supplied inline
   styles should never override our column constraints. */

/* Negative margins can pull content outside the column. */
.blog-content [style*="margin-left:-"],
.blog-content [style*="margin-left: -"],
.blog-content [style*="margin-right:-"],
.blog-content [style*="margin-right: -"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Absolute / fixed positioning escapes flow. */
.blog-content [style*="position:absolute"],
.blog-content [style*="position: absolute"],
.blog-content [style*="position:fixed"],
.blog-content [style*="position: fixed"] {
    position: static !important;
}

/* Hard-coded pixel widths over the column. Force responsive behaviour. */
.blog-content [style*="width:1"],
.blog-content [style*="width: 1"],
.blog-content [style*="width:2"],
.blog-content [style*="width: 2"] {
    /* width values like 1000px, 1200px, 2000px etc. */
    max-width: 100% !important;
}

/* Floats: leave alone (legitimate "image floated left in article" usage)
   but clamp width. */
.blog-content [style*="float:"] {
    max-width: 50%;
}

/* ---------- 4. Intentional break-out classes ------------------------------- */
/* When an editor genuinely wants a layout block wider than the text column
   (a 3-card row, a hero callout, a full-width chart), wrap that block in
   .blog-wide or .blog-full. Both collapse to 100% on mobile.
   USAGE in Summernote (Code View):
     <div class="blog-wide">
         <div class="row">
             <div class="col-md-4">card 1</div>
             <div class="col-md-4">card 2</div>
             <div class="col-md-4">card 3</div>
         </div>
     </div>
*/

.blog-content .blog-wide {
    width: calc(100% + 200px);
    margin-left: -100px;
    margin-right: -100px;
    max-width: none;                   /* override the safety rule above */
}

.blog-content .blog-full {
    /* span the viewport regardless of column width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
}

/* On screens smaller than lg, the parent column is already 100% so the
   break-out classes collapse back to inline behaviour. */
@media (max-width: 991px) {
    .blog-content .blog-wide,
    .blog-content .blog-full {
        width: 100%;
        position: static;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- 5. Featured image (hero) -------------------------------------- */
/* The hero image is the LCP element. Reserve aspect to prevent CLS, cap height
   to keep above-the-fold layout consistent. */
.blog-hero-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* ============================================================================
   6. Blog List page — cards, chips, sidebar widgets, tag pills.
   Colours use the site CSS variables (--me-blue = #293c88 deep navy brand,
   --me-blue-light = #2065b2 medium blue accent) defined in common.css.
   ============================================================================ */

/* ---------- Page-scoped top spacing override ------------------------------- */
/* _Layout.cshtml already wraps RenderBody() in <main class="pb-3 pt-sm-6 pt-md-5 pt-lg-8">.
   That padding is sized for the homepage hero. On the blog list we counter-shift
   with a negative top margin so the breadcrumb sits ~24px below the fixed navbar. */
.blog-list-main {
    margin-top: -2rem;        /* counter the layout's pt-sm-6 (~3rem) */
    padding-top: 16px;        /* re-apply a controlled, small gap */
}
@media (min-width: 768px) {
    .blog-list-main {
        margin-top: -1.5rem;  /* counter pt-md-5 */
        padding-top: 12px;
    }
}
@media (min-width: 992px) {
    .blog-list-main {
        margin-top: -4rem;    /* counter pt-lg-8 */
        padding-top: 8px;
    }
}

/* ---------- Category chips (above grid) ----------------------------------- */
.blog-chip {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 4px 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--me-blue, #293c88);
    background: #fff;
    border: 1px solid var(--me-blue, #293c88);
    border-radius: 999px;
    text-decoration: none;
    transition: all .15s ease-in-out;
}

.blog-chip:hover,
.blog-chip:focus {
    background: var(--me-blue, #293c88);
    color: #fff !important;
    text-decoration: none;
}

.blog-chip.active {
    background: var(--me-blue, #293c88);
    color: #fff;
    font-weight: 600;
    border-color: var(--me-blue, #293c88);
}

/* ---------- Card grid ------------------------------------------------------ */
/* Modern card: subtle elevation, rounded corners, polished hover lift. */
.blog-card {
    background: #fff;
    border: 1px solid #eaecef;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.blog-card:hover,
.blog-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
    border-color: #d8dde2;
}

/* Image: uniform 16:10 aspect across all cards (works on any source dimensions).
   object-position: top center preserves the headline area for screenshot-style
   images (where the logo/headline typically sits at the top). */
.blog-card-image,
.blog-card-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    object-position: top center;
    display: block;
    background: #f1f3f6;
    margin: 0;
}

/* Older browsers without aspect-ratio support fall back to fixed height. */
@supports not (aspect-ratio: 16 / 10) {
    .blog-card-image,
    .blog-card-image-placeholder {
        height: 190px;
    }
}

.blog-card-image-placeholder {
    color: #c5cad1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.blog-card-body {
    padding: 16px 18px 18px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.blog-card-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.blog-card-meta time { color: #6b7280; }

.blog-card-title {
    color: #1e293b;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    margin: 0 0 10px;
    /* Clamp to 2 lines to keep cards uniform. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-card-title,
.blog-card:focus .blog-card-title {
    color: var(--me-blue, #293c88);
}

.blog-card-excerpt {
    color: #4b5563;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    flex: 1 1 auto;
    /* Clamp to 3 lines for visual uniformity across cards. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Sidebar widgets ----------------------------------------------- */
.sidebar-widget {
    background: #fff;
    border: 1px solid #eaecef;
    border-radius: 10px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sidebar-widget-header {
    background: var(--me-blue, #293c88);
    color: #fff;
    padding: 10px 14px;
}

.sidebar-widget-header h6 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.sidebar-widget-body {
    padding: 12px 14px;
    font-size: 14px;
}

.sidebar-widget-body a {
    color: var(--me-blue, #293c88);
    text-decoration: none;
}

.sidebar-widget-body a:hover,
.sidebar-widget-body a:focus {
    color: var(--me-blue-dark, #202F6B);
    text-decoration: underline;
}

/* Tag pills inside the sidebar must NOT inherit the underline-on-hover from
   the generic .sidebar-widget-body a rule -- pills already invert bg/colour. */
.sidebar-widget-body a.tag-pill,
.sidebar-widget-body a.tag-pill:hover,
.sidebar-widget-body a.tag-pill:focus {
    text-decoration: none;
}

/* ---------- Tag pills (sidebar + post detail) ----------------------------- */
.tag-pill {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--me-blue, #293c88) !important;
    background: #eef1f9;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all .15s ease-in-out;
}

.tag-pill:hover,
.tag-pill:focus {
    background: var(--me-blue, #293c88) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.tag-pill.active {
    background: var(--me-blue, #293c88) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ---------- Override common.css .text-blue for blog headings -------------- */
/* common.css already defines .text-blue to use var(--me-blue) -- no override needed. */

/* ============================================================================
   7. Share buttons (BlogDetail) — official brand colours so the row reads as
   Facebook / X / LinkedIn without ambiguity.
   ============================================================================ */
.btn-share-facebook {
    color: #1877F2;
    background-color: #fff;
    border: 1px solid #1877F2;
}
.btn-share-facebook:hover,
.btn-share-facebook:focus {
    color: #fff;
    background-color: #1877F2;
    border-color: #1877F2;
    text-decoration: none;
}

.btn-share-x {
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
}
.btn-share-x:hover,
.btn-share-x:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
    text-decoration: none;
}

/* LinkedIn brand blue (current corporate logo). */
.btn-share-linkedin {
    color: #0A66C2;
    background-color: #fff;
    border: 1px solid #0A66C2;
}
.btn-share-linkedin:hover,
.btn-share-linkedin:focus {
    color: #fff;
    background-color: #0A66C2;
    border-color: #0A66C2;
    text-decoration: none;
}