@charset "UTF-8";

/* Framed editorial quotations: the photographs and comment copy stay intact. */
.destinations {
    --comment-paper: #f7f8f3;
    --comment-line: #c5d3be;
    --comment-quote: #cbd7c3;
    --comment-marker: #d5e1c7;
}
.destination-name-highlight {
    padding-inline: .08em;
    margin-inline: -.08em;
    color: var(--green);
    font-weight: 700;
    background: linear-gradient(to bottom, transparent 60%, var(--comment-marker) 60%, var(--comment-marker) 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    white-space: nowrap;
}
.destinations .destination-card { row-gap: 32px; }
.destination-card > .panda-comment,
.destination-card > .panda-comment-pair { grid-column: 1 / -1; }
.panda-comment {
    position: relative;
    min-width: 0;
    padding: 22px 28px 24px;
    border: 1px solid var(--comment-line);
    border-radius: 4px;
    background: linear-gradient(120deg, var(--comment-paper), #fcfcf8);
}
.panda-comment--single {
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr);
    align-items: stretch;
    gap: 26px;
    padding: 26px 32px;
}
.panda-comment--single::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 102px;
    background: url("img/bamboo10.png") right top / cover no-repeat;
    opacity: .14;
    pointer-events: none;
}
.panda-comment-heading { min-width: 0; margin-bottom: 12px; }
.panda-comment--single .panda-comment-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
    padding-right: 24px;
    border-right: 1px solid var(--comment-line);
}
.panda-comment-avatar {
    display: block;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    padding: 5px;
    border-radius: 50%;
    background: #e9ebe5;
    object-fit: cover;
    object-position: center;
}
.panda-comment-byline {
    margin: 0 0 8px;
    color: var(--green-2);
    font: 600 14px/1.6 var(--sans);
    letter-spacing: .04em;
}
.panda-comment-heading h4 {
    margin: 0;
    color: var(--green);
    font: 600 24px/1.55 var(--serif);
    letter-spacing: .02em;
    text-wrap: pretty;
}
.panda-comment blockquote {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0 0 18px 42px;
}
.panda-comment blockquote::before,
.panda-comment blockquote::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 28px;
    background: var(--comment-quote);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M14 1C6 6 2 13 2 21a7 7 0 1 0 14 0c0-4-3-7-7-7H7c1-4 4-8 9-11ZM36 1c-8 5-12 12-12 20a7 7 0 1 0 14 0c0-4-3-7-7-7h-2c1-4 4-8 9-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M14 1C6 6 2 13 2 21a7 7 0 1 0 14 0c0-4-3-7-7-7H7c1-4 4-8 9-11ZM36 1c-8 5-12 12-12 20a7 7 0 1 0 14 0c0-4-3-7-7-7h-2c1-4 4-8 9-11Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.panda-comment blockquote::before { top: 0; left: 0; }
.panda-comment blockquote::after { right: -8px; bottom: -3px; transform: rotate(180deg); }
.panda-comment-heading h4 > span,
.panda-comment time { white-space: nowrap; }
.panda-comment--single blockquote { max-width: 800px; padding-right: 10px; }
.panda-comment blockquote p {
    margin: 0;
    color: var(--reading-ink, var(--ink));
    font: 400 var(--reading-body, 18px)/1.95 var(--serif);
    letter-spacing: .015em;
    line-break: strict;
    text-wrap: balance;
}
.panda-comment-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
    min-width: 0;
}
.panda-comments-intro {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.panda-comments-author { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.panda-comments-author .panda-comment-avatar { width: 58px; height: 58px; }
.panda-comments-author .panda-comment-byline { margin: 0; }
.panda-comments-rule { height: 1px; min-width: 0; flex: 1 1 auto; background: #91aa98; }
.panda-comments-note { margin: 0; color: var(--muted); font: 400 16px/1.7 var(--serif); }

@media (max-width: 920px) {
    .panda-comment--single { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .panda-comment { padding: 22px 24px 24px; }
    .panda-comment--single .panda-comment-heading { border-right: 0; border-bottom: 1px solid var(--comment-line); padding: 0 0 18px; }
    .panda-comment--single .panda-comment-avatar { width: 68px; height: 68px; }
    .panda-comment-heading h4 { font-size: 22px; }
    .panda-comment-pair { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .panda-comment blockquote { padding-left: 36px; }
    .panda-comment blockquote p { text-wrap: pretty; }
    .panda-comment blockquote::before, .panda-comment blockquote::after { width: 28px; height: 24px; }
}
@media (max-width: 640px) {
    .destinations .destination-card { row-gap: 24px; }
    .panda-comment { padding: 20px; }
    .panda-comment-heading { margin-bottom: 12px; }
    .panda-comment--single { gap: 14px; }
    .panda-comment--single .panda-comment-avatar { width: 60px; height: 60px; }
    .panda-comment-heading h4 { font-size: 22px; letter-spacing: 0; }
    .panda-comment-byline { margin-bottom: 6px; }
    .panda-comment blockquote { padding: 0 0 20px 28px; }
    .panda-comment blockquote::before, .panda-comment blockquote::after { width: 22px; height: 20px; }
    .panda-comment blockquote::after { right: 0; bottom: -2px; }
    .panda-comments-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
    .panda-comments-author { gap: 12px; }
    .panda-comments-author .panda-comment-avatar { width: 50px; height: 50px; }
    .panda-comments-note { grid-column: 1 / -1; font-size: 14px; text-align: right; text-wrap: pretty; }
}