/* ============================================================
   Calgary Games guides: one presentation for every guide.
   Loaded on guide pages (single posts) and on any page that uses
   the Guide cards block (Resources).

   1. Guide page: banner, heading and date area, text width
   2. Reference tables that wrap instead of scrolling sideways
   3. Guide cards (Resources) and the compact "More guides" row
   ============================================================ */

/* ---------- 1. Guide page ---------- */

/* Start the guide where pages start, so the banner sits at the same
   height as every other hero. */
body.single-post #primary.content-area {
    margin-top: 0;
}

/* The article box already has its own padding. Drop the second layer
   the page styles add, so the heading, date and body text share one
   left edge and phones get the full reading width. */
body.single-post .entry-content.single-content {
    margin-top: 1.25rem;
    padding: 0;
}
body.single-post .entry-header {
    margin-bottom: 0;
}
body.single-post .entry-header .entry-taxonomies {
    margin-bottom: 0.2rem;
}
body.single-post .entry-header .entry-title {
    margin-bottom: 0.5rem;
}
body.single-post .entry-header .entry-meta {
    margin: 0.2rem 0 0;
}

/* Banner artwork that names the guide: the text heading stays for
   screen readers and search engines only. */
body.cg-guide-title-hidden .entry-header .entry-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Banner. Artwork of any shape is fitted into the same box as the page
   heroes (640 x 360) and never cropped or stretched. */
body.single-post .cg-page-hero--guide {
    max-width: 640px;
    margin: 0 auto 1.1rem;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    text-align: center;
}
body.single-post .cg-page-hero--guide .cg-page-hero__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 360px;
    margin: 0 auto;
    border-radius: 8px;
}
/* Artwork with no lettering is an illustration, not a title card:
   a little smaller, and the text heading follows it. */
body.single-post .cg-page-hero--plain .cg-page-hero__img {
    max-height: 300px;
    border-radius: 0;
}

/* Optional one-line subtitle under the heading (paragraph with the
   class cg-guide-subtitle). */
.single-post .entry-content .cg-guide-subtitle {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cg-dark);
}

@media (max-width: 767px) {
    body.single-post #primary.content-area {
        margin-top: 0;
    }
    /* Lettered banners run edge to edge on phones, like page heroes. */
    body.single-post .cg-page-hero--guide:not(.cg-page-hero--plain) {
        max-width: none;
        margin: -1rem -1.5rem 1rem;
    }
    body.single-post .cg-page-hero--guide:not(.cg-page-hero--plain) .cg-page-hero__img {
        width: 100%;
        max-height: none;
        border-radius: 0;
    }
    body.single-post .cg-page-hero--plain {
        margin: 0 auto 0.75rem;
    }
    body.single-post .cg-page-hero--plain .cg-page-hero__img {
        max-height: 230px;
    }
    .single-post .entry-content .cg-guide-subtitle {
        font-size: 1.08rem;
    }
}

/* ---------- 2. Reference tables ----------
   Site tables treat the last column as a price (right-aligned, kept on
   one line). Reference tables hold sentences there, so let them wrap:
   .cg-battery-ref  the Quick Reference table in the battery guide
   .cg-ref-table    any other reference table (tool chart) */
.wp-block-table.cg-battery-ref,
.wp-block-table.cg-ref-table {
    overflow-x: visible;
}
.wp-block-table.cg-battery-ref tbody td:last-child,
.wp-block-table.cg-battery-ref thead th:last-child,
.wp-block-table.cg-ref-table tbody td:last-child,
.wp-block-table.cg-ref-table thead th:last-child {
    text-align: left;
    font-weight: 400;
    white-space: normal;
}
.wp-block-table.cg-battery-ref thead th:last-child,
.wp-block-table.cg-ref-table thead th:last-child {
    font-weight: 700;
}
.wp-block-table.cg-battery-ref tbody td,
.wp-block-table.cg-ref-table tbody td {
    vertical-align: top;
    overflow-wrap: anywhere;
}
.wp-block-table.cg-ref-table tbody td:first-child {
    width: 46%;
    font-weight: 600;
    color: var(--cg-dark);
}
.wp-block-table.cg-ref-table {
    margin: 0.75rem 0 1.75rem;
}
.wp-block-table.cg-ref-table tbody td small,
.wp-block-table.cg-ref-table .cg-ref-note {
    display: block;
    margin-top: 2px;
    font-size: 0.86em;
    font-weight: 400;
    color: #555b63;
}

/* Phones: the three-column battery table becomes one labelled block per
   battery. (The table markup has no data labels, so the labels are
   written here and must match the three column headings.) */
@media (max-width: 600px) {
    .wp-block-table.cg-battery-ref thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .wp-block-table.cg-battery-ref table,
    .wp-block-table.cg-battery-ref tbody,
    .wp-block-table.cg-battery-ref tr,
    .wp-block-table.cg-battery-ref td {
        display: block;
        width: auto;
    }
    .wp-block-table.cg-battery-ref tbody tr {
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid var(--cg-border);
    }
    .wp-block-table.cg-battery-ref tbody tr:last-child {
        border-bottom: 0;
    }
    .wp-block-table.cg-battery-ref tbody td {
        padding: 0;
        border: 0;
        font-size: 0.95rem;
    }
    .wp-block-table.cg-battery-ref tbody td:first-child {
        margin-bottom: 0.25rem;
        font-size: 1.05rem;
    }
    .wp-block-table.cg-battery-ref tbody td:nth-child(2)::before {
        content: "Tab style: ";
        font-weight: 600;
    }
    .wp-block-table.cg-battery-ref tbody td:nth-child(3)::before {
        content: "Common use: ";
        font-weight: 600;
    }
    .wp-block-table.cg-ref-table tbody td:first-child {
        width: 44%;
    }
}

/* ---------- 3. Guide cards ---------- */
.cg-guides {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 2.5rem;
    padding: 0;
}
.cg-guide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-top: 3px solid var(--cg-red);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.cg-guide-card:hover,
.cg-guide-card:focus-within {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
}
/* One image frame for artwork of any shape: fitted, never cropped. */
.cg-guide-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #fff;
    border-bottom: 1px solid #e2e4e8;
}
.cg-guides .cg-guide-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
}
.cg-guide-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem 1.1rem 1.1rem;
}
.cg-guides .cg-guide-card__title {
    margin: 0 0 0.45rem;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
/* Card titles read as headings, not as inline text links. The doubled
   class outranks the site-wide content link style. */
.cg-guides .cg-guide-card.cg-guide-card .cg-guide-card__body .cg-guide-card__title a {
    color: var(--cg-dark);
    text-decoration: none;
    border: 0;
    box-shadow: none;
}
.cg-guides .cg-guide-card.cg-guide-card:hover .cg-guide-card__body .cg-guide-card__title a {
    color: var(--cg-red-dark);
    text-decoration: none;
}
.cg-more-guides .cg-more-guides__all a {
    color: var(--cg-teal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cg-more-guides .cg-more-guides__all a:hover {
    color: var(--cg-red);
}
/* The whole card is the link target. */
.cg-guides .cg-guide-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cg-guides .cg-guide-card__title a:focus-visible {
    outline: none;
}
.cg-guide-card:focus-within {
    outline: 3px solid var(--cg-teal);
    outline-offset: 2px;
}
.cg-guides .cg-guide-card__text {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #555b63;
}
.cg-guide-card__more {
    margin-top: auto;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cg-teal-dark);
}
.cg-guide-card:hover .cg-guide-card__more {
    color: var(--cg-red-dark);
}

/* Compact row at the foot of a guide: picture + title. */
.cg-more-guides {
    margin: 3rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid #e2e4e8;
}
.cg-more-guides .cg-more-guides__title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}
.cg-guides--compact {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
    margin: 0 0 1rem;
}
.cg-guides--compact .cg-guide-card__body {
    padding: 0.7rem 0.8rem 0.8rem;
}
.cg-guides.cg-guides--compact .cg-guide-card__title {
    margin: 0;
    font-size: 0.98rem;
}
.cg-more-guides .cg-more-guides__all {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .cg-guides {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin: 1.5rem 0 2rem;
    }
    /* On phones the compact cards turn into rows: small picture left,
       title right. */
    .cg-guides--compact .cg-guide-card {
        flex-direction: row;
        align-items: center;
        border-top-width: 1px;
        border-left: 3px solid var(--cg-red);
    }
    .cg-guides--compact .cg-guide-card__media {
        flex: 0 0 104px;
        border-bottom: 0;
        border-right: 1px solid #e2e4e8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-guide-card {
        transition: none;
    }
    .cg-guide-card:hover,
    .cg-guide-card:focus-within {
        transform: none;
    }
}

@media print {
    .cg-more-guides {
        display: none;
    }
}