/* The Instagram sizes pages (/blog/instagram-sizes, /blog/instagram-story-size,
   /blog/instagram-carousel-size): the answer and the size picker above the guide
   (instagram-sizes.js), the table of every size, and the hub's size cards.
   Loaded after landing.css, free-tools/tool.css and blog/article.css. */

/* No word left alone on the last line of the title or the lede. */
.sizes-hero h1{text-wrap:balance}
.sizes-hero .guide-lede{text-wrap:pretty}
.sizes-tool{margin-top:40px}
.sizes-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:48px;align-items:start;padding:44px 48px;background:#fff;border-radius:22px;box-shadow:0 2px 4px #00000005}
.sizes-answer h2{font-size:28px;line-height:1.25;letter-spacing:-.035em}
.sizes-answer>p{margin-top:14px;font-size:17px;line-height:1.75;color:#2e2e2e}
.sizes-answer strong{font-weight:600;color:var(--ink)}
.sizes-answer .answer{margin-top:20px}
.sizes-answer .sizes-source{margin-top:14px;font-size:13px;line-height:1.65;color:#6b6b6b}
.sizes-answer .sizes-subhead{margin-top:28px;font-size:16px;letter-spacing:-.02em}
.sizes-answer .sizes-subhead+.sizes-table{margin-top:12px}
.sizes-source a,.sp-more a,.sizes-table a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* The table of every size: four columns on a desktop, two lines a row on a phone. */
.sizes-table{margin-top:22px;border:1px solid #ececec;border-radius:14px;overflow:hidden}
.sizes-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.sizes-table th,.sizes-table td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #efefef}
.sizes-table thead th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373;background:#fafafa}
.sizes-table tbody tr:last-child>*{border-bottom:0}
.sizes-table tbody th{font-weight:600;color:var(--ink)}
.sizes-table .px{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.sizes-table .ratio{white-space:nowrap;color:#515151}
.sizes-table .note{color:#515151}

/* Headings inside the guide's sections: room above an H3, and between an
   H2 and the H3 under it (article.css sets neither, so they sat on the text). */
.guide-body section>h3{margin-top:32px}
.guide-body section>h2+h3{margin-top:22px}
.guide-body section>h3+p,.guide-body section>h3+ul{margin-top:8px}

/* The picker */
.sp-title{font-size:12px;font-weight:600;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:#6b6b6b}
.sp-controls{display:grid;gap:14px;margin-top:14px}
.sp-group{min-width:0;margin:0;padding:0;border:0}
.sp-group legend{margin-bottom:8px;padding:0;font-size:13px;font-weight:500;color:#515151}
.sp-options{display:flex;flex-wrap:wrap;gap:6px}
.sp-options label{position:relative;display:block}
.sp-options input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sp-options span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid #dcdcdc;border-radius:99px;background:#fff;font-size:14px;font-weight:500;color:#2e2e2e;user-select:none}
.sp-options label:hover span{border-color:#a8a8a8}
.sp-options input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.sp-options input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.sp-slides{display:grid;gap:4px}
.sp-slides label{font-size:13px;font-weight:500;color:#515151}
.sp-slides output{margin-left:4px;font-weight:600;color:var(--ink)}
.sp-slides input{width:100%;height:30px;margin:0;accent-color:#0a0a0a;cursor:pointer}
.sp-slides input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sp-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:20px}
.sp-figure{margin:0}
.sp-figure svg{display:block;width:100%;height:auto}
.sp-figure-phone svg{aspect-ratio:1152/1992}
.sp-figure figcaption{margin-top:8px;font-size:12px;line-height:1.4;color:#6b6b6b;text-align:center}
.sp-figure-strip{grid-column:1/-1}
.sp-figure-strip svg{border-radius:8px}
.sp-readout{margin-top:18px;padding:16px 18px;border-radius:14px;background:#f6f7f5}
.sp-size{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.sp-name{flex-basis:100%;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373}
.sp-size strong{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sp-ratio{font-size:15px;font-weight:500;color:#515151}
.sp-notes{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.6;color:#3d3d3d}
.sp-notes li+li{margin-top:4px}
.sp-more{margin-top:10px;font-size:14px}
.sp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sp-actions .button{min-height:46px;padding:11px 20px;font-size:15px;gap:0}
.sp-actions .button-quiet{border:1px solid #d4d4d4;background:#fff;color:var(--ink)}
.sp-actions .button-quiet:hover{border-color:#a8a8a8;background:#fff;box-shadow:none}

/* "More from our blog" (tool.css styles its cards): three cards fill the row. */
.more-posts .more-tools-list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* The hub's cards to every size page */
.guide-body .sizes-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;padding:0;list-style:none}
.guide-body .sizes-cards li{margin:0}
.guide-body .sizes-cards a{display:block;height:100%;padding:18px 20px;border:1px solid #ececec;border-radius:14px;color:inherit;text-decoration:none}
.guide-body .sizes-cards a:hover{border-color:#bdbdbd}
.guide-body .sizes-cards strong{display:block;font-size:16px;line-height:1.4}
.guide-body .sizes-cards .px{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--blue)}
.guide-body .sizes-cards span:last-child{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:#515151}
.guide-body .num{text-align:right}

@media(prefers-reduced-motion:no-preference){.sp-options span{transition:background .15s,border-color .15s,color .15s}}
@media(max-width:1100px){
 .sizes-card{grid-template-columns:minmax(0,1fr);gap:36px}
 .sizes-picker{max-width:520px}
}
@media(max-width:650px){
 .sizes-hero{padding-top:88px}
 .sizes-hero .guide-lede{margin-top:14px}
 .sizes-hero .guide-byline{margin-top:16px}
 .sizes-tool{margin-top:24px}
 .sizes-card{gap:28px;padding:24px 16px;border-radius:18px}
 .sizes-answer h2{font-size:24px}
 .sizes-answer>p{font-size:16px;line-height:1.7}
 .sizes-answer .answer{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .sizes-answer .answer div{padding:12px}
 .sizes-answer .answer dd{font-size:16px}
 .sizes-answer .answer dd small{font-size:12px}
 .sizes-table thead{display:none}
 .sizes-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:11px 14px;border-bottom:1px solid #efefef}
 .sizes-table tbody tr:last-child{border-bottom:0}
 .sizes-table tbody th,.sizes-table tbody td{padding:0;border:0}
 .sizes-table tbody th{grid-column:1;grid-row:1}
 .sizes-table .px{grid-column:2;grid-row:1;text-align:right}
 .sizes-table .note{grid-column:1;grid-row:2;font-size:14px}
 .sizes-table .ratio{grid-column:2;grid-row:2;text-align:right;font-size:14px}
 .sp-stage{gap:12px}
 .guide-body .sizes-cards{grid-template-columns:minmax(0,1fr)}
}