/*
 * YC Path Lab - theme adjustments.
 *
 * Loads after every Elementor/Astra stylesheet.
 */

/* --- Image gallery columns ----------------------------------------------
 * WordPress sets the column count as a class on the gallery container
 * (gallery-columns-3), and the matching width lives in galleries.min.css as
 * `.gallery-columns-3 .gallery-item { max-width: 33.33% }`.
 *
 * galleries.min.css in this theme also carries ~8KB of hand-added rules, one
 * of which forces `width: auto !important; max-width: none !important` on
 * .gallery-item. That rule is scoped to three certification-strip galleries
 * (01ffd71 / f8935f2 / 6d169e4), but if its scope is ever widened it silently
 * collapses every other gallery to two columns.
 *
 * Restate the column widths here, last and with !important, so the declared
 * column count always wins. Values match WordPress's own defaults.
 */

/* Lay the gallery out as a grid rather than relying on inline-block widths.
 * The items carry `padding: 10px` from galleries.min.css; with inline-block
 * the per-item padding plus the whitespace between elements pushes three
 * 33.33% items past the track and the third wraps. A grid with an explicit
 * column count sidesteps both and honours the declared column count exactly. */

.elementor-image-gallery .gallery {
    display: grid !important;
    align-items: start !important;
}

.elementor-image-gallery .gallery.gallery-columns-1 { grid-template-columns: repeat(1, 1fr) !important; }
.elementor-image-gallery .gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.elementor-image-gallery .gallery.gallery-columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.elementor-image-gallery .gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.elementor-image-gallery .gallery.gallery-columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
.elementor-image-gallery .gallery.gallery-columns-6 { grid-template-columns: repeat(6, 1fr) !important; }

.elementor-image-gallery .gallery .gallery-item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.elementor-image-gallery .gallery .gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* The gallery track must be able to use the full column width. */
.elementor-widget-image-gallery > .elementor-widget-container,
.elementor-widget-image-gallery .elementor-image-gallery {
    width: 100%;
    max-width: 100%;
}

/* Below the Elementor tablet breakpoint WordPress collapses wide galleries. */
@media (max-width: 767px) {
    .elementor-image-gallery .gallery.gallery-columns-3,
    .elementor-image-gallery .gallery.gallery-columns-4,
    .elementor-image-gallery .gallery.gallery-columns-5,
    .elementor-image-gallery .gallery.gallery-columns-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 479px) {
    .elementor-image-gallery .gallery.gallery-columns-2,
    .elementor-image-gallery .gallery.gallery-columns-3,
    .elementor-image-gallery .gallery.gallery-columns-4,
    .elementor-image-gallery .gallery.gallery-columns-5,
    .elementor-image-gallery .gallery.gallery-columns-6 {
        grid-template-columns: 1fr !important;
    }
}

/* --- "Our Lab Certification" logo strip ---------------------------------
 * The certification widget (element 8ca7db1) is a WordPress gallery whose
 * column count varies by page -- 2 on About Us, 5 on Dr Yogesh Chhabra and
 * Gallery. Each item also carries `padding: 0 64px 64px 0` from its Elementor
 * bundle, which pushes the items past 100% so they wrap.
 *
 * galleries.min.css lays this strip out as a right-aligned flex row, but only
 * for elements 01ffd71 / f8935f2 / 6d169e4 (the home page). Extend the same
 * treatment to 8ca7db1, and cap the logo width so the row matches the
 * reference (~98px per logo) instead of rendering at natural size.
 */

.elementor-element-8ca7db1 .elementor-image-gallery .gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element-8ca7db1 .elementor-image-gallery .gallery .gallery-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
}

.elementor-element-8ca7db1 .elementor-image-gallery .gallery-icon,
.elementor-element-8ca7db1 .elementor-image-gallery .gallery-icon a {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

/* The reference renders each logo ~98px wide; the source files are ~178px. */
.elementor-element-8ca7db1 .elementor-image-gallery .gallery-icon img {
    display: block !important;
    width: auto !important;
    max-width: 100px !important;
    height: auto !important;
    border: none !important;
}

@media (max-width: 1024px) {
    .elementor-element-8ca7db1 .elementor-image-gallery .gallery {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px !important;
    }
}

@media (max-width: 767px) {
    .elementor-element-8ca7db1 .elementor-image-gallery .gallery-icon img {
        max-width: 80px !important;
    }
}

/* ---- Blog listing -----------------------------------------------------
 * Scoped to .yc-blog-list, the wrapper Views/Page/blog.cshtml puts on its
 * own listing, so these rules reach the blog and nothing else. No body class
 * and no layout condition -- the layout stays as the other themes keep it.
 *
 * Two things Astra does not supply here:
 *   1. The site-wide ast-page-builder-template body class makes
 *      .site-content > .ast-container full bleed, which is right for the
 *      Elementor pages but leaves the listing edge-to-edge. The container is
 *      restored below, for the listing only.
 *   2. Astra ships no sizing for .post-thumb-img-content and no rules for
 *      .ast-blog-single-element, so the thumbnail renders at its natural
 *      height and the title/meta/excerpt keep their default margins. Both
 *      are set below to the reference's proportions.
 */
.yc-blog-list {
    /* The reference uses a 1240px container with ~100px of inner padding,
     * giving the ~1024px content column its screenshots show. */
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 100px;
    /* The site-wide ast-theme-transparent-header class takes #masthead out of
     * the flow (position:absolute), so this padding has to cover the header
     * itself before any gap is visible. The bar's min-height is 70px but the
     * logo is up to 120px, so it occupies ~200px in practice. 165px clears
     * the bar and leaves the band of white the reference shows. */
    padding-block-start: 165px;
    padding-block-end: 60px;
}

/* One rule between entries. Astra already draws it via .blog-layout-1
 * (border-bottom:1px) on the inner wrapper, so this must NOT add a second --
 * it only sets the spacing around that existing line. */
.yc-blog-list .ast-article-post {
    margin-bottom: 2.5em;
}

.yc-blog-list .blog-layout-1 {
    padding-bottom: 2.5em;
}

/* No trailing rule under the last post. */
.yc-blog-list .ast-article-post:last-child {
    margin-bottom: 0;
}

.yc-blog-list .ast-article-post:last-child .blog-layout-1 {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Astra ships no rules at all for .ast-blog-single-element, the class it puts
 * on the title, meta, excerpt and read-more. Without them each element keeps
 * its default margins and the card spreads out far more than the reference,
 * which keeps these tight. These values match the reference's rhythm. */
.yc-blog-list .ast-blog-featured-section {
    margin-bottom: 1.2em;
}

.yc-blog-list .entry-title {
    margin: 0 0 0.4em;
    font-size: 30px;
    line-height: 1.3;
}

.yc-blog-list .entry-header {
    margin: 0 0 0.8em;
}

.yc-blog-list .entry-meta,
.yc-blog-list .entry-meta * {
    font-size: 15px;
    line-height: 1.45;
}

.yc-blog-list .entry-content {
    margin: 0 0 1em;
}

.yc-blog-list .entry-content p {
    margin: 0;
    line-height: 1.7;
}

.yc-blog-list .ast-read-more-container {
    margin: 0;
}

.ast-article-post .post-thumb-img-content {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

/* The reference shows the whole 16:9 featured image, not a crop -- the full
 * artwork is visible end to end. So constrain the aspect ratio rather than
 * forcing a fixed height, and let the image scale with the container. */
.ast-article-post .post-thumb-img-content img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1240px) {
    .yc-blog-list {
        padding-inline: 40px;
    }
}

@media (max-width: 767px) {
    .yc-blog-list {
        padding-inline: 20px;
        padding-block-start: 130px;
    }

    .yc-blog-list .entry-title {
        font-size: 24px;
    }

    .ast-article-post .post-thumb-img-content img {
        aspect-ratio: 16 / 10;
    }
}

/* ---- Single blog post --------------------------------------------------
 * A post's body is plain prose (<p>, <h2>, <ul>) straight from the CMS, with
 * no container of its own. Every Elementor page opens with a .elementor
 * wrapper and brings its own widths, so :not() tells the two apart without
 * touching Page/Default.cshtml -- that file is shared boilerplate, byte for
 * byte identical across the other themes, so it should not diverge here.
 * .ast-row is excluded too: that is the blog listing, styled above.
 *
 * The site-wide ast-page-builder-template class makes .site-content >
 * .ast-container full bleed, and ast-theme-transparent-header takes the
 * header out of the flow, so a post otherwise runs edge to edge and starts
 * underneath the menu. Both are corrected here, for posts only.
 */
.site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
    /* The reference runs a post's text and its featured image at the same
     * width: a 1240px container less ~125px of gutter each side, about
     * 990px. Matching that keeps the image full size instead of shrinking
     * it to a narrower reading column. */
    box-sizing: border-box;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 125px;
}

/* Clear the absolutely positioned header above the first element, and leave
 * room below the last one. */
.site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline):first-child {
    margin-block-start: 165px;
}

.site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline):last-child {
    margin-block-end: 60px;
}

/* Prose rhythm for the post body. It arrives as bare <p>/<h2>/<ul> with no
 * styling of its own, so without these the headings crowd the text. */
.site-main > h2:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
    margin-block: 1.4em 0.5em;
    line-height: 1.3;
}

.site-main > h3:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
    margin-block: 1.2em 0.4em;
    line-height: 1.35;
}

.site-main > p:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline),
.site-main > ul:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline),
.site-main > ol:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
    margin-block: 0 1.1em;
    line-height: 1.75;
}

.site-main > figure:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
    margin-block: 1.5em;
}

.site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 1240px) {
    .site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
        padding-inline: 40px;
    }
}

@media (max-width: 767px) {
    .site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline) {
        padding-inline: 20px;
    }

    .site-main > *:not(.elementor):not(.ast-row):not(.post-navigation):not(.yc-post-byline):first-child {
        margin-block-start: 130px;
    }
}

/* ---- Post navigation ---------------------------------------------------
 * Astra already styles this, but every one of its rules is scoped to the
 * `.single` body class, which this layout does not set (and should not --
 * the layout stays free of page-specific logic). These are the same
 * declarations, keyed off the nav element itself instead.
 *
 * Widths match the post body above it, so the links line up with the text.
 */
.site-main > .post-navigation {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto 60px;
    padding: 1.5em 125px 2em;
    border-top: 1px solid var(--ast-single-post-border, var(--ast-border-color));
}

.site-main > .post-navigation .nav-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
}

/* With only one link present it keeps its own side, as on the reference. */
.site-main > .post-navigation .nav-next:only-child {
    margin-inline-start: auto;
}

.site-main > .post-navigation a {
    display: inline-block;
    margin: 2px;
    color: var(--ast-global-color-1);
}

@media (max-width: 1240px) {
    .site-main > .post-navigation {
        padding-inline: 40px;
    }
}

@media (max-width: 767px) {
    .site-main > .post-navigation {
        padding-inline: 20px;
    }

    .site-main > .post-navigation .nav-links {
        flex-direction: column;
        gap: 12px;
    }
}

/* ---- Post byline -------------------------------------------------------
 * "October 21, 2026 / By Priyanka Devi" under each post title, as the
 * reference shows. On a single post the byline is its own element in
 * .site-main, so it needs the same width as the prose around it.
 */
.site-main > .yc-post-byline {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto 1.2em;
    padding-inline: 125px;
}

/* The byline is the first element on a post, so it carries the clearance for
 * the absolutely positioned header (see the single-post block above). */
.site-main > .yc-post-byline:first-child {
    margin-block-start: 165px;
}

.entry-meta .author-name {
    color: var(--ast-global-color-1);
}

@media (max-width: 1240px) {
    .site-main > .yc-post-byline {
        padding-inline: 40px;
    }
}

@media (max-width: 767px) {
    .site-main > .yc-post-byline {
        padding-inline: 20px;
    }

    .site-main > .yc-post-byline:first-child {
        margin-block-start: 130px;
    }
}

/* --- Home page "Our Lab Certification" strip ---------------------------
 * The label and the logos are flex siblings in row 6d169e4, and the columns
 * already carry the right widths (--width:69.665% / 30%) -- that part is fine.
 *
 * The line itself is the divider's `:after` pseudo-element with flex-grow:1,
 * so it fills whatever room its column leaves. What pushes it over the logos
 * is page-blocks.css giving each gallery item `padding: 0 64px 64px 0` with a
 * matching negative margin on the gallery: the A.P.P. logo is dragged 64px
 * left, into the line's path.
 *
 * Lay the strip out as a flex row instead, with real spacing and no negative
 * margin -- the same treatment already applied to the About Us strip.
 *
 * Scoped to page 319, so no other gallery is affected.
 */
.elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery {
    /* The gallery-columns grid fix earlier in this file sets
     * `display: grid !important` on every .elementor-image-gallery .gallery,
     * which turns this strip into two equal 50% tracks and ignores any
     * justify-content. !important here is needed to win that, not for weight
     * against page-blocks.css.
     *
     * The reference spreads the two logos across the column: ~85px before the
     * A.P.P. mark, ~105px between, ~40px after the ISO badge. */
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

/* The grid fix forces width/max-width:100% !important on every gallery item,
 * so these need the same weight to size by content instead. */
.elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery-item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
    float: none;
    flex: 0 0 auto;
}

.elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery-icon,
.elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery-icon a {
    display: block;
    margin: 0;
    padding: 0;
}

.elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery-item img {
    /* Each logo keeps its own proportions: on the reference the A.P.P. mark
     * is roughly twice the width of the ISO badge, so a single cap for both
     * would shrink one or stretch the other. The grid fix sets
     * width:100% !important on gallery images, hence the weight here. */
    width: auto !important;
    max-width: 130px !important;
    height: auto !important;
    margin: 0;
}

@media (max-width: 767px) {
    .elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery {
        justify-content: space-between;
    }

    .elementor-319 .elementor-element.elementor-element-01ffd71 .elementor-image-gallery .gallery-item img {
        max-width: 90px !important;
    }
}