/*
 * The site's styles, on top of Bootstrap 3 and Lato (both linked from
 * includes/head.php). The first half is the old hand-coded site's styles.css;
 * the second, from the maintenance banner on, the CMS's own additions.
 */

/* Chris|Maggs logo (includes/navigation.php): #logo > a > #logoLeft + #logoRight */
#logo{position:relative;margin-top:7px}
#logo a{font-size:18px;line-height:32px;color:#fff;text-shadow:0 0 1px #333}
#logoLeft,#logoRight{position:absolute;top:0;height:36px;border:1px solid #ccc}
#logoLeft{left:10px;width:77px;padding-left:9px;border-radius:7px;background:linear-gradient(#828282,#393731)}
#logoRight{left:69px;width:70px;padding-left:6px;border-left:0;border-radius:0 7px 7px 0;background:linear-gradient(#4daccc,#298cad 62%)}

:root {
    --blue: #298CAD;
    --background-image: #FFFFFF url(../images/schematic.png) no-repeat top right;
}
body {
    font-size: 16px;
    background-color: #f2f2f2;
    margin-top: 50px;
    color: #555;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 50px);
}
#page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.homepage,
.content {
    flex: 1;
}
h1,h2,h3,h4,h5,h6,button,a.btn,input,blockquote {
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
    font-weight:400;
}
/* BS over-ride */
.has-error .help-block {
    margin-bottom: 0;
    text-align: right;
    font-style: italic;
}
/* TOP NAVIGATION --------------------------------- */
/* ------------------------------------------------ */
.navbar {
    font-weight: 400;
    font-size: 14px;
}
.navbar-inverse {
    background-color: #2d2d2d;
    border-color: #2d2d2d;
}
.navbar-inverse .navbar-nav > .active > a {
    background: var(--blue);
}
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background: var(--blue);
    cursor: default;
}
.dropdown-menu {
    background-color: #c1c1c1;
    border-color: #333;
}
.dropdown-menu > li > a {
    padding: 5px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #333;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--blue);
    cursor: default;
}
/*  TYPOGRAPHY  ------------------------------------   */
/*  ------------------------------------------------   */
a {
    color: #298cad;
    word-wrap: break-word;
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
    transition: color 0.2s ease-in, background 0.2s ease-in;
}
a:before, a:after {
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
    transition: color 0.2s ease-in, background 0.2s ease-in;
}
a:hover,
a:focus {
    color: #298cad;
    text-decoration: none;
    outline: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
i:hover {
    cursor: help;
}
a.blue {
    color: var(--blue);
}
.post-link a {
    color: #333333;
}
/* SHARED BOX STYLE ------------------------------- */
/* ------------------------------------------------ */
.panel-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* ALL PAGES  ------------------------------------- */
/* ------------------------------------------------ */
.homepage,
.content {
    background-color: #FFF;
    padding: 30px 20px;
    margin-top: 30px;
}
/* The schematic sits behind the homepage's hero; inner pages draw it below
   the page title instead (.content .page-title, further down) */
.homepage {
    background: var(--background-image);
}
h1 {    font-size: 36px;    line-height: 50px;    margin: 10px 0;   letter-spacing: 3px;    text-shadow: 1px 1px 1px #686868;  color: var(--blue);  }
h2 {    font-size: 30px;    line-height: 30px;    margin: 20px 0;   letter-spacing: 2px;    text-shadow: 1px 1px 1px #686868;   }
h3 {    font-size: 20px;    line-height: 30px;    margin: 10px 0;   color: #333333; }
h4 {    font-size: 16px;    line-height: 18px;    margin: 10px 0;   }

.homepage h1 {
    font-size: 50px;
    line-height: 60px;
}

@media screen and (max-width: 479px) {

    h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .homepage h1 {
        font-size: 40px;
        line-height: 50px;
    }
    h2 {
        font-size: 25px;
    }
}

blockquote {
    font-size: inherit;
    border:      1px solid var(--blue);
    border-left: 5px solid var(--blue);
    margin: 20px 0;
    padding: 10px;
}

/* {home} ----------------------------------------- */
/* ------------------------------------------------ */
span.code {
    color: #298cad;
    font-size: 20px;
    font-family: monospace;
    text-align: left;
    display: block;
}
.p10 {  padding-left: 50px; }
.p80 {  padding-left: 80px; }
.m10 {  display: block; margin-left: 50px; }
.m20 {  display: block; margin-left: 100px; }

@media screen and (max-width: 479px) {

    .p10 {  padding-left: 30px; }
    .p80 {  padding-left: 50px; }

    .m10 {  margin-left: 30px; }
    .m20 {  margin-left: 60px; }

}

/* {summary} -------------------------------------- */
/* ------------------------------------------------ */
#summary {
    padding-top: 20px;
    padding-bottom: 20px;
}
#summary h4 {
    color: var(--blue);
    margin: 10px 0 15px;
}
#summary .summary {
    padding: 5px;
}
@media (min-width: 992px) {
    #summary .summary:first-of-type {
        padding-left: 0;
    }
    #summary .summary:last-of-type {
        padding-right: 0;
    }
}
#summary .summary-inner {
    padding: 20px;
    height: 100%;
}
/* {OSSOFTWARE} ----------------------------------- */
/* ------------------------------------------------ */
/* A box in a .projects-grid (templates/bespoke/bespoke-git-projects.php,
   bespoke-open-source-software.php), whose flex row stretches every box to
   the tallest; the link bar sits at the bottom (margin-top: auto). Heading +
   link heights are matched per row by js/site.js. */
.ossoftware {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--blue);
    padding: 10px 10px 0;
}
.ossoftware h2 {
    margin-top: 10px;
}
.ossoftware img {
    margin-left: 20px;   /* the Git Projects' StyleCI badges */
}
/* Logo row (bespoke-open-source-software.php): a fixed 200px band, so the
   titles below still line up across a row whatever the logo's shape. Images
   shrink to fit it but aren't stretched past their own size. */
.ossoftware p.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 0;
}
.ossoftware p.logo img {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
.ossoftware p.link {
    background-color:var(--blue);
    padding: 5px 10px;
    margin: auto -10px 0;
}
.ossoftware p.link a {
    color:#fff
}
.ossoftware p.link a:hover {
    color:#333;
}
dl.pros dt,
dl.cons dt {
    font-weight: bold;
    font-size: 16px;
    color: var(--blue);
    padding: 5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}
dl.pros dd,
dl.cons dd {
    margin-left: 5px;
}
dl.pros dd i,
dl.cons dd i {
    font-size: 16px;
    color: var(--blue);
    padding: 5px;
}
/* {RHS COL} -------------------------------------- */
/* ------------------------------------------------ */
.pt20 {     padding-top: 20px;  }
.pt50 {     padding-top: 50px;  }

.img-border {
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #298cad #1C667F #1C667F #298cad;
}
/* API Form page ---------------------------------- */
/* ------------------------------------------------ */
.pre,
.pre pre {
    min-height:600px;
}
.table > thead > tr > th {
    vertical-align: top;
}
/* FOOTER------------------------------------------ */
/* ------------------------------------------------ */
#footer {
    background: #2d2d2d;
    padding-bottom: 30px;
    font-size: 14px;
}
#footer h3 {
    color:#ccc;
    font-size: 25px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 0 #000;
}
#footer h4 {
    font-size: 14px;
    color: #ccc;
}
#footer .links {
    padding-top: 20px;
}
#footer img.icon {
    padding-right: 5px;
    max-width:32px;
    max-height: 32px
}
#footer p,
#footer a {
    color: #7b7b7b;
}
#footer a:hover,
#footer a:focus {
    color: #ffffff;
}

/* Shown to a logged-in admin while MAINTENANCE_MODE is on (includes/maintenanceBanner.php) */

#maintenanceBanner {
    padding: 0.6rem 1.5rem;
    background: #fcf3d9;
    color: #6b5514;
    border-bottom: 1px solid #e6d190;
    font-size: 0.85rem;
    text-align: center;
}

/* Blog callouts (Admin::CALLOUT_STYLES) - same colours as the admin preview
   in admin/css/styles.css; a new style needs a .callout-<key> rule in both.
   Each style has its own icon (Bootstrap 3's Glyphicons) in a left gutter. */

.callout {
    position: relative;
    border: 1px solid;
    border-left-width: 5px;
    border-radius: 4px;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 34px;
}
.callout::before {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: 'Glyphicons Halflings';
    font-size: 15px;
    line-height: 1;
}
.callout:last-child {
    margin-bottom: 0;
}
.callout-error   { border-color: #d9534f; background: #fdf2f2; }
.callout-warning { border-color: #f0ad4e; background: #fdf8ec; }
.callout-info    { border-color: #298cad; background: #eff7fa; }
.callout-error::before   { content: "\e083"; color: #d9534f; } /* remove-sign */
.callout-warning::before { content: "\e107"; color: #f0ad4e; } /* warning-sign */
.callout-info::before    { content: "\e086"; color: #298cad; } /* info-sign */

/* Homepage .summary - Content-1 is a <ul> in the CMS; shown like the old
   site's h3 lines (the h3 rule above), no bullets */

.homepage-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.homepage-summary li {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0;
    color: #333333;
}

/* Blog listings (includes/blogPostSummary.php) */

/* Category links (blogDefault) or Back to the blog (blogCategory, blogPost)
   on the left; post count, or a post's date, on the right */
.blog-listing-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
}
.blog-listing-bar .nav-pills > li > a {
    font-size: 18px;
}
.blog-post-count {
    margin-left: auto;
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-summary {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.blog-summary:last-of-type {
    border-bottom: 0;
}
h2.blog-summary-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: none;
    margin: 0 0 6px;
}
h2.blog-summary-title a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
h2.blog-summary-title a:hover,
h2.blog-summary-title a:focus {
    color: #1c667f;
    border-bottom-color: currentColor;
}
.blog-summary-text {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 10px;
}
/* Date on the left, 'Read post' on the right, on one line */
.blog-summary-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 5px 15px;
    margin: 0;
}
.blog-summary-date {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 'Read post' is a btn btn-default, styled like the contact form's Send
   button - a.blog-summary-more to win over the a.btn reset's padding: 0 */
a.blog-summary-more {
    flex-shrink: 0;
    padding: 6px 12px;
}
.blog-summary-thumb {
    margin-left: auto;
    max-height: 190px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: opacity 0.2s ease-in;
}
.blog-summary-thumb:hover {
    opacity: 0.85;
}
@media screen and (max-width: 479px) {
    h2.blog-summary-title {
        font-size: 22px;
    }
    .blog-summary-text {
        font-size: 16px;
    }
}

/* Admin-edited content: contain floated (img-left / img-right) images */

.editable-content::after {
    content: '';
    display: block;
    clear: both;
}
.editable-content img {
    max-width: 100%;
    height: auto;
}

/* Tables whose columns were dragged to a width in CKEditor (TableColumnResize)
   save those widths as a <colgroup>; fixed layout makes them hold, as
   CKEditor's own content CSS does in the admin */
.editable-content table.ck-table-resized {
    table-layout: fixed;
    width: 100%;
}

/* Top-align cells to match the admin editor (web.css) - the browser default
   is middle, which leaves short text floating beside a tall image */
.editable-content th,
.editable-content td {
    vertical-align: top;
}

/* Blog post callouts sit in the right-hand column, which stays in view
   below the fixed navbar (51px) as the post scrolls - md up only, where it
   is a column; below that it stacks under the post */

@media (min-width: 992px) {
    .blog-aside {
        position: sticky;
        top: 71px;
    }
}

.callout p:last-child {
    margin-bottom: 0;
}

/* Right-hand column images - a blog post's Blog Image, a page's images */

.blog-image {
    margin-top: 10px;
}
.callout + .blog-image {
    margin-top: 20px;
}

/* Contact page (templates/contact.php): space between the intro text and the form */
#contactForm {
    margin-top: 50px;
}

/* A page's right-hand column (includes/contentAside.php) - set apart from
   the text beside it (only while it is beside it, not stacked below), each
   image framed, with its title captioned underneath */
@media (min-width: 992px) {
    .content-aside {
        padding-left: 35px;
    }
}
.sidebar-image figure {
    margin: 0 0 20px;
}
.sidebar-image img {
    padding: 5px;
    border: 1px solid #ccc;
}
.sidebar-image figcaption {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-top: 0;
    background: #eee;
    font-size: 12px;
    color: #555;
}
.content-aside .assoc-documents h3 {
    margin-top: 0;
}

/* Images placed in the editor (admin/js/ckeditor/init.js image styles):
   left / right float with the text wrapping round them, fullWidth spans the
   column. Mirrors the editor's own preview (admin/js/web.css) so a page
   looks the same here as it did while being edited. A resized image carries
   its width as an inline percentage, which is kept. */

.editable-content img.left,
.editable-content figure.image.left,
.editable-content .image-inline.left {
    float: left;
    max-width: 50%;
    margin: 5px 25px 15px 0;
}
.editable-content img.right,
.editable-content figure.image.right,
.editable-content .image-inline.right {
    float: right;
    max-width: 50%;
    margin: 5px 0 15px 25px;
}
.editable-content figure.image.left img,
.editable-content figure.image.right img,
.editable-content .image-inline.left img,
.editable-content .image-inline.right img {
    width: 100%;
}
.editable-content img.fullWidth,
.editable-content figure.image.fullWidth,
.editable-content figure.image.fullWidth img {
    width: 100%;
    max-width: 100%;
    margin: 0 15px;
}
.editable-content img.left,
.editable-content img.right,
.editable-content img.fullWidth,
.editable-content figure.image img {
    border-radius: 6px;
}
.editable-content figure.image {
    margin-top: 0;
}

/* Phones: no room to wrap text round a float - stack it above instead */
@media screen and (max-width: 479px) {
    .editable-content img.left,
    .editable-content img.right,
    .editable-content figure.image.left,
    .editable-content figure.image.right {
        float: none;
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin: 10px 0 15px;
    }
}

/* Each paragraph starts below any image floated in the one before it, so
   an image only ever wraps the paragraph it was placed in */
.editable-content p {
    clear: both;
}

/* Git Projects / Open Source Software grid (the .ossoftware boxes above): a
   flex row, so every box in a row stretches to the tallest */

.projects-grid {
    display: flex;
    flex-wrap: wrap;
}
.projects-grid::before,
.projects-grid::after {
    display: none;   /* Bootstrap's clearfix would otherwise be a flex item */
}
.projects-grid > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

/* CONTENT PAGES */
.content {
    position: relative;
    z-index: 0;
    overflow: clip;   /* not hidden: that would stop the blog post's sticky .blog-aside */
    background: var(--background-image);
}

/* Breathing room between the title's closing } and the page content */
.content .page-title {
    margin-bottom: 20px;
}

/* The title's .sub_heading lines (includes/pageTitle.php) - a light grey
   lede, rather than the big black shadowed h2 above */
.page-title h2 {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #555;
    text-shadow: none;
    margin: 2px 0;
}
@media screen and (max-width: 479px) {
    .page-title h2 {
        font-size: 17px;
    }
}

/* A page's 'Page updated' date (includes/pageUpdated.php) */
.page-updated {
    font-size: 11px;
    color: #999;
    text-align: right;
    margin: 20px 0 0;
}

/* Below md, col-md-4 has no width of its own - as a flex item it would
   shrink to its content, so make each project box full width instead */
@media (max-width: 991px) {
    .projects-grid > [class*="col-"] {
        width: 100%;
    }
}

/* Previous / next links (includes/prevNext.php): side by side from sm up,
   "next" right-aligned with its indent mirrored onto the right; each
   post's date on its own line under the title */
.prev-next-date {
    display: block;
    margin-top: 5px;
}
@media (min-width: 768px) {
    .prev-next-next,
    .prev-next-next span.code {
        text-align: right;
    }
    .prev-next-next .m10 {
        margin-left: 0;
        margin-right: 50px;
    }
}

/* Bootstrap's own blue (#337ab7 buttons, #66afe9 focus glow) swapped for
   the site's (--blue, #298CAD; #1C667F is its darker shade) - the URL
   Shortener's Shorten / Lookup buttons, FAQ search, any form field */

.btn-primary {
    background-color: var(--blue);
    border-color: #237a97;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: #1c667f;
    border-color: #16536a;
}
.form-control:focus {
    border-color: var(--blue);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(41, 140, 173, 0.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(41, 140, 173, 0.5);
}

/* Lightbox (js/site.js): add class="lightbox" to an <img> to open it full
   size in a modal <dialog>. Page scrolling is locked while it's open. */

img.lightbox {
    cursor: zoom-in;
}
img.lightbox:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
body.lightbox-open {
    overflow: hidden;
}
.lightbox-dialog {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    cursor: zoom-out;
}
.lightbox-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-fade 0.2s ease-out;
}
.lightbox-dialog::backdrop {
    background: rgba(0, 0, 0, 0.85);
}
.lightbox-dialog figure {
    margin: 0;
    text-align: center;
}
.lightbox-dialog img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.lightbox-dialog figcaption {
    margin-top: 12px;
    color: #eee;
    font-size: 15px;
}
.lightbox-close {
    position: fixed;
    top: 10px;
    right: 16px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    opacity: 0.8;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
    opacity: 1;
}
@keyframes lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* SECTION pages (templates/sections.php): each section after the page text */
.content .section {
    padding-top: 20px;
}

/* Gallery (templates/gallery.php, galleryAlbum.php) - the bar above each
   reuses the blog's .blog-listing-bar */

.album-grid,
.photo-grid {
    display: grid;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* The album index: a grid of album cards */
.album-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding-top: 20px;
}

/* A card: cover, then name and count */
.album-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    color: #555;
    transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in;
}
.album-card:hover,
.album-card:focus-visible {
    color: #555;
    border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(41, 140, 173, .25);
}
.album-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.album-card-cover {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px 2px 0 0;   /* the card's 3px less its 1px border, so the curves match */
    background: #eee;
}
.album-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.album-card-name {
    display: block;
    padding: 10px 12px 0;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: var(--blue);
}
.album-card-count {
    display: block;
    padding: 2px 12px 12px;
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* One album: square tiles, cropped to fill */
.photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    padding-top: 20px;
}
/* Each tile framed like an .album-card: a light border and shadow, blue on hover */
.photo-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    background: #eee;
    cursor: zoom-in;
    transition: border-color 0.2s ease-in, box-shadow 0.2s ease-in;
}
.photo-grid a:hover,
.photo-grid a:focus-visible {
    border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(41, 140, 173, .25);
}
.photo-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;   /* the tile's 3px less its 1px border, so the curves match */
}
.photo-grid a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Below the carousel, the grid is a strip of small thumbnails (js/gallery.js
   adds .is-thumbs) - a click moves the carousel, the current one is blue.
   Larger screens only: a phone has the swipe. */
.photo-grid.is-thumbs {
    display: flex;   /* not grid: auto-fill's empty columns would stop it centring */
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-top: 25px;
}
.photo-grid.is-thumbs li {
    width: 64px;
}
.photo-grid.is-thumbs a {
    cursor: pointer;
}
.photo-grid.is-thumbs a.is-current {
    border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue);
}
@media (max-width: 767px) {
    .photo-grid.is-thumbs {
        display: none;
    }
}

/* The album carousel (js/gallery.js builds it from the .photo-grid, which it
   hides): every slide shares one grid cell, so the stage is one slide high,
   and the script places each around the centre with a 3D transform. The
   photo area is one 4:3 shape whatever the photo, so the stack never jumps;
   a photo of another shape is fitted inside it. */
.album-carousel {
    position: relative;
    padding: 30px 50px 0;
}
.album-carousel:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}
.album-carousel-stage {
    display: grid;
    justify-items: center;
    perspective: 1400px;
    touch-action: pan-y;   /* sideways drags are the script's swipe */
}
.album-carousel-slide {
    grid-area: 1 / 1;
    width: min(560px, 62%);
    margin: 0;
    padding: 10px 10px 0;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform 0.45s ease, opacity 0.3s ease;
    user-select: none;
}
.album-carousel-slide.is-current {
    cursor: zoom-in;
}
.album-carousel-slide.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.album-carousel-photo {
    aspect-ratio: 4 / 3;
    background: #f2f2f2;
}
.album-carousel-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}
/* The centre photo's caption (its date); kept the same height on every
   slide, empty or hidden, so they all line up */
.album-carousel-slide figcaption {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #888;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 16px;
}
.album-carousel-slide:not(.is-current) figcaption {
    visibility: hidden;
}

/* Thin chevrons at each side, as in the mock-up */
.album-carousel-arrow {
    position: absolute;
    top: 30px;
    bottom: 40px;
    width: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    z-index: 200;
}
.album-carousel-prev { left: 0; }
.album-carousel-next { right: 0; }
.album-carousel-arrow::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}
.album-carousel-prev::before { transform: translateX(4px) rotate(-45deg); }
.album-carousel-next::before { transform: translateX(-4px) rotate(135deg); }
.album-carousel-arrow:hover,
.album-carousel-arrow:focus-visible {
    color: var(--blue);
}
.album-carousel-arrow:focus-visible {
    outline: 2px solid var(--blue);
}
.album-carousel-arrow:disabled {
    opacity: 0.25;
    color: #999;
}

.album-carousel-counter {
    margin: 20px 0 0;
    text-align: center;
    color: #888;
    font-size: 13px;
    letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
    .album-carousel {
        padding: 20px 30px 0;
    }
    .album-carousel-slide {
        width: 72%;
        padding: 6px 6px 0;
    }
    .album-carousel-arrow {
        top: 20px;
        width: 30px;
    }
    .album-carousel-arrow::before {
        width: 16px;
        height: 16px;
    }
}

/* The lightbox's caption (js/gallery.js): the date the photo was taken */
.pswp__taken {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px;
    text-align: center;
    color: #eee;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    pointer-events: none;
}
.pswp__taken:empty {
    display: none;
}

@media screen and (max-width: 479px) {
    .album-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .album-card-name {
        font-size: 16px;
    }
    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
}