/* Travel section: /travel/ index and per-country pages */

.travel-map {
    height: 480px;
    margin: 2rem 0;
}

.travel-page .travel-map {
    height: 320px;
    margin: 1.5rem 0 0.75rem;
}

/* Column flow (not grid rows) so a long tile like USA doesn't stretch its neighbours.
   Alphabetical order runs down each column. */
.travel-grid {
    column-count: 3;
    column-gap: 12px;
    margin: 1.5rem 0 2.5rem;
}

.travel-tile {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e6e6e3;
    border-radius: 6px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.travel-tile:hover {
    background-color: #f4f4f1;
    border-color: #d8d8d4;
}

.travel-tile-nolink {
    color: #999;
}

.travel-tile-name {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Raleway', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 600;
    font-size: 1.05em;
    color: #333;
}

.travel-tile-places {
    margin-top: 6px;
    font-size: 0.82em;
    line-height: 1.45;
    color: #777;
}

.travel-tile-places span:not(:last-child)::after {
    content: ", ";
}

.travel-places {
    margin: 0 0 1.5rem;
    font-size: 0.9em;
    line-height: 1.5;
    color: #777;
}

/* Sized to the h1 cap height (Raleway caps ~0.71em; 28px * 0.71 ~ 20px = 15px * 1.33)
   and anchored at the baseline, so the flag spans exactly cap-top to baseline. */
.travel-heading-flag {
    margin-left: 0.5em;
    vertical-align: baseline;
    transform: scale(1.33);
    transform-origin: left bottom;
}

@media (max-width: 800px) {
    .travel-grid { column-count: 2; }
}

@media (max-width: 600px) {
    .travel-grid { column-count: 1; }
    .travel-map { height: 320px; }
    .travel-page .travel-map { height: 240px; }
}

/* BEGIN generated by admin/build-flag-sprite.py */
.flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    background: url(/img/flags-sprite.png?v=05e0d52b) no-repeat;
    background-size: 440px 15px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    vertical-align: middle;
}
.flag-at { background-position: -0px 0; }
.flag-ca { background-position: -20px 0; }
.flag-cr { background-position: -40px 0; }
.flag-cz { background-position: -60px 0; }
.flag-de { background-position: -80px 0; }
.flag-es { background-position: -100px 0; }
.flag-fr { background-position: -120px 0; }
.flag-gr { background-position: -140px 0; }
.flag-in { background-position: -160px 0; }
.flag-it { background-position: -180px 0; }
.flag-jp { background-position: -200px 0; }
.flag-kr { background-position: -220px 0; }
.flag-mc { background-position: -240px 0; }
.flag-mx { background-position: -260px 0; }
.flag-my { background-position: -280px 0; }
.flag-np { background-position: -300px 0; }
.flag-pt { background-position: -320px 0; }
.flag-sg { background-position: -340px 0; }
.flag-th { background-position: -360px 0; }
.flag-tr { background-position: -380px 0; }
.flag-us { background-position: -400px 0; }
.flag-va { background-position: -420px 0; }
/* Nepal's flag is not rectangular; no outline */
.flag-np { box-shadow: none; border-radius: 0; }
/* END generated by admin/build-flag-sprite.py */